Coded up a live version of Andrey's shot using some css3 animations. See the live version here.
over 1 year ago
this... just rocks :D can't stop starring at this tiny snail :D hah!
good job Maxim!
By the way, you are not the first one, here is an example from Dylan Lamers - http://www.dylanlamers.nl/projects/Helixbar/
Anyway it is nice to see my creature in action, thanks!
You both have made a small mistake, take a look at my shot and see where the helix starts moving :)
@Andrey Thanks mate.
The reason why the helix starts moving from where it does is due to it being position center over where the progress point is. If it starts with it's tail at the position of your image it's head overlaps on to the background when it's reaches 100%.
Dylan Lamers's is definitely more accurate to your shot. I used this as an test of css3 properties rather than using images (expect for the Helix), unfortunately css3 gradients aren't up to the level that photoshop can produce, or maybe it's my skills!.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter