This has stopped working due to an odd timing issue with a minuscule
-webkit-transition-durationvalue firing a
Checkout a pure CSS version here: https://github.com/rgthree/google-loader-css
Google/Gmail's "Folding Circle"
Right now, it's built for webkit (using
-webkit- CSS properties). However, it should work for any browser capable of CSS Transitions, with the appropriates changes.
Whoa, how'd you do that?
Good question! The loader is constructed of a single element which has a
:after pseduo element blocks positioned at the left half, and the right half of the square element, each rounded to appear as a full circle. A single child element is then "folded" from the right to the left with a 3d animation. The right pseudo element is changed to the next color before the fold, and the single child element the same after the first half of the fold. After each fold the child element is positioned back to the right, the pseduo elements reflect their new color states, and the parent element is rotated to 90 degrees to switch between horizontal and vertical folds,
Ah yes, that would be great. Unfortunately, while it can be built this way the timing is not guarenteed. There are essentially three animations occuring:
- The folding and color change of the child
- The rotation of the parent element after each fold of the child
- The color change of the pseudo elements at each half of the child's fold
Because we cannot gurantee that the keyframes of individual CSS Animations match up, some awful flickering is likely to occur. Further, we cannot animate pseduo elements at this time (though, I believe Mozilla can at the time of this writing).
Therefore, we use CSS transitions with a JS listener for the end of each transition to trigger the state of the element through a
data-state attribute. We use
data-state and CSS3 attribute selectors to reuse transitions based on part of the attributes value.
This gist has been setup using jsfiddle to demo. See it here: http://jsfiddle.net/gh/gist/library/pure/4547132/