Regis Gaughan, III

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

The Digital Dater

I’m a “catch” by most anyone’s standards: polite, handsome, confident and well-off. I’m also single. Now don’t get it wrong, I’ve be out there dating… a lot. Statistically there should have been a handful of relationships that moved into a “serious” status but here I am; single. And I’m not alone either: OkCupid, Plenty of Fish, Match, eHarmony… there’s literally millions of successful and attractive people trying to find that special someone. So, why are we all still single?

I’ll tell you why: You and I, we suffer from Digital Dating Attention Deficit Disorder. Continue reading

We are strong

The world can be a violent place. Everyday there’s more and more footage of panic and sadness in the streets flooding our TVs, laptops and phones. More often than not that panic is somewhere unrecognizable to me; the sadness of the people is not familiar. On April 15th, 2013 that changed. The blood on the sidewalk was pooling where I was standing just days before; the ash covering the skyline I can see every morning; the reality of the panic in the faces echoing within me. Continue reading

Jesus Christ in “Swim Meet”

In 2004 I made my second ever Flash animation — and my first attempt at frame-by-frame animation — “Jesus Christ in ‘Swim Meet.'” While I haven’t done a cartoon in forever, Easter Sunday nine years later seems like a good day to revisit it. Enjoy!

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