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...