If you’re on Chrome you should see the 3D-Page-Flipping-Color-Changing-Circle-Animation Google uses when Gmail and Chrome are loading content, at least on iOS. The animation should work with other 3D-transition supported browsers, but I only built it for Chrome at the moment. Feel free to modify the CSS and event names to get it more cross-browser.
Want to jump right in? View the Gist or View the jsFiddle right now.
“Okay fancy-pants, how’s you do that?”
Good question! The loader is constructed of two semi-circles built from
:after pseudo-element blocks absolutely positioned at the left and right half of the square element. there is a single child element, also a semi-circle, starting absolutely position on top of the right pseudo-element semi-circle. Only that child element is animated as a 3D fold from the right to the left. Before the fold occurs, the left pseudo-element and the child semi-circle are the same color, while the right pseudo-element that is under the child is set to the next color. As we flip the child from right to left, we darken it’s initial color up to the midway point for a 3D effect. Once it meets the midway point where it will not be visible with a width of 0, we immediately change it’s color to a slightly darker version of the next color (which is now fully seen in the right pseudo-element that used to be under the child). Now, we animate the the rest of the flip, so the child semi-circle will now be covering the left pseudo-element and the entire circle is now the next color. We then reset the positions and set the colors getting ready for the next color, as well as rotate 90 degrees so the flip occurs vertically.
Ah yes, that would be great. Unfortunately, while it can be built using only CSS animations, the timing cannot be guarenteed. There are essentially three animations occuring: 1. The folding and color change of the child 2. The rotation of the parent element after each fold of the child 3. The color change of the pseudo elements at each half of the child’s fold
“Alright, alright… Show me the code!”
The HTML is pretty simple:
The CSS does the bulk of the work. You can see we use the attribute selector to generically match the
data-state attribute. For instance, the CSS rule
.gloader[data-state$=".5"] matches any “.5″ state, regardless of it is state “0.5” or “3.5”. We use
.gloader[data-state^="2"] the same way, to match states “2.0” to “2.75.”
inc(). If you look at the CSS, we are changing the z-index as well as the colors and transforms.
Hopefully you found that cool and could follow along. Check out the Gist on Github or the jsFiddle Demo.