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 work on internal products that help the company build quality software that customers love. Before that, I was at Mystery Science, transforming how elementary school teachers teach science. 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.

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 very proud owner of a van, duh, and he and I plan to one day visit all the national parks and baseball stadiums. Then, off to Central America. A man can dream :)

What can I do for you?

Read my other posts or get in touch: