CSS Spinners

Spinners are really easy to implement with animated GIFs. However, they don’t look great when overlayed on top of another image because GIFs only support index transparency. If they’re on a solid background, you can match colors and they’ll look fine. Services like ajaxload.info make it easy to generate the appropriate image.

To implement a spinner as an overlay requires another approach. SpiffyGif turned me onto the idea of using a translucent PNG sprite spinner. This technique involves a PNG sprite with every frame drawn out. Some JavaScript code updates the background-position of the sprite on an interval, which makes it appear to be spinning. Here’s the example they provide:

See the Pen The Sprite Spinner by Avand (@avand) on CodePen.

Initially, I was enamored with the idea but as I started to wire it up, I realized it was heavy-handed. There had to be a way to achieve the same affect without JS. I knew if I animated the transform: rotate(360deg) declaration, I knew I could get the PNG to spin around but it looks awkward when the spokes of the graphic actually move. Then I remembered that the timing-function could be given as a number of steps (e.g, [steps(n)]). Instead of drawing each frame of the animation, steps(n) breaks up the animation into n states. steps(2), for example, would draw the animation when it’s 50% complete and then again at 100% ignoring the steps in between. If you set n to match the number of spokes in your graphic, you’ll rotate the PNG in as many steps, just like a second hand might tick around a clock. Here’s a demo:

You could take this idea further and actually generate the graphic with CSS too but personally I think the PNG works just fine.

Thanks for reading! I'm Avand.

I am a full-stack software engineer, product designer, and teacher. I’ve been working on the web for over a decade and am passionate about building great products.

I currently work at Airbnb, where I help internal product teams stay abreast with customer feedback. Before that, I was at Mystery Science, transforming how elementary school teachers teach science. And since 2013, I’ve worked on-and-off with General Assembly, teaching aspiring developers what I know about front-end web development.

I was born in Boston, grew up in Salt Lake City, and spent many years living in Chicago. Now, I call San Francisco my home.

I’m an aspiring rock climber. I have a love affair with music and cars, especially vintage BMWs and Volkswagens. One day, I’ll buy a van and transform it into an offroad-capable camping rig.

But that’s enough about me. How can I help you?

Read my other posts or get in touch: