NOTE
This has stopped working due to an odd timing issue with a minuscule
-webkit-transition-duration
value firing awebkitTransitionEnd
Checkout a pure CSS version here: https://github.com/rgthree/google-loader-css
A recreation of Gmail's "Folding Circle" loading animation using CSS transitions & javascript.
Right now, it's built for webkit (using webkitTransitionEnd
and -webkit-
CSS properties). However, it should work for any browser capable of CSS Transitions, with the appropriates changes.
Good question! The loader is constructed of a single element which has a :before
and :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/
Enjoy!
Great !