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.
background-position of the sprite on an interval, which makes it appear to be spinning. Here’s the example they provide:
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.