Regis Gaughan, III

Posts Tagged: javascript

Google’s 3D Loading Animation

DON’T READ THIS. While this attempt was great at the time, there’s a much more improved method I’ve written up over here: Google/Gmail’s 3D Loader. Enjoy.

The new Google loading animation is pretty neat. I wanted to see if I could recreate it using only CSS. Unfortunately, I needed the help of JavaScript to trigger the changes between “keyframes” but, in the end, I got it fully recreated.

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