Ajax Loader
×

Single Element gif Recreation

Recreated http://imgur.com/GqdaY5F in one element. I don't take credit for the original (nor do I know where it's from)

There are some pretty cool tricks I came up with in order to do so:

  • All of the big rings are done using box shadows, as are three of the small circles

  • One of the small circles is done using :before, the other rotating counter clockwise is :before's box shadow

  • To allow the second two small circles to go in the opposite direction, a translateY was needed before and after the rotate, for more information on the approach go here http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/ (I play with it a bit to fit my case)

  • I used an SVG as a background URL in the :after pseudoelement to get the segmented circle

I would optimize the paint time by increasing the animation duration and rotation degree by the same factor, but the white flashes make that far more difficult. I would have to calculate new %s when the dots overlap and have to add those to the list... Maybe one day...

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

0 Comments

× New

Sign In to comment

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+