Regis Gaughan, III

Posts Tagged: css

Google/Gmail’s 3D Loader

The 3D loading circle in pure CSS with only a single element

About a year ago, I set out to recreate Google/Gmails’s 3D iOS flipping circle loader. It was a success at the time but relied on JavaScript to trigger the states and, at some point, stopped working flawlessly. I wanted to revisit it now to see if we could be recreate it using only CSS and a single HTML element… Good news: We can!

If you’re on most current browsers you should see the 3D-Page-Flipping-Color-Changing-Circle-Animation Google uses when Gmail and Chrome are loading content. Continue reading

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