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’ve been working on the web for over a decade and am passionate about building great products.

My last job was with Airbnb, where I focused on internal products that helped teams measure the quality of the software they were building. I also built internal tools for employees to stay more connected, especially after the COVID-19 pandemic. Before that, I was lead engineer at Mystery Science, the #1 way in which science is taught in U.S. elementary school classroms. For a while, I also taught with General Assembly, teaching aspiring developers the basics of 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 and Mariposa my home away from home.

I enjoy the great outdoors and absolutely love music and dance. Cars have been an lifelong obsession of mine, especially vintage BMWs and Volkswagens. I’m the proud owner of a 2002 E-250 Sportsmobile van, and he and I have enjoyed many trips to beautiful and remote parts of the West Coast to create good vibes.

What can I do for you?

Read my other posts or get in touch: