Regis Gaughan, III

Posts Tagged: css-animations

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