Animating Loading Spinners with CSS

I recently had the privilege of being invited to give my first ever meetup talk at SydCSS. It was a first time speakers night so short talks (5 mins) and high nerves were the order of the day. On a recent side project I had wasted a bunch of time creating a fancy loading spinner while I was mentally blocked trying to solve a real problem. I had the idea at the time that I could probably give a reasonably interesting talk by making some loading animations with CSS and explaining the interesting parts of the CSS animation API used for each animation. »

Beware the DOM Reflow

TL;DR Don’t ever use a CSS transition with any CSS property that causes a DOM reflow, you will never get smooth transitions, even if you attempt to use a common hack to force GPU rendering of the transitioning DOM element. Try to use the CSS transform property instead of something like left or width for transitions. A little background I’ve been working on a mobile app using Cordova (PhoneGap) and AngularJS which has been quite fun to work with so far. »