CSS Continuous Image Rotation

A short time ago, I was wanting a rotating "working" image with a transparent background. (Also sometimes named a "busy" image or a "throbber".)

I had animated GIFs. But they all had color backgrounds.

The solution was to make a non-animated image with a transparent background. Then use CSS to rotate it continuously.

The code in this article is designed to rotate any image. The image rotates continuously — at any speed you specify.

Although you are likely to use the code for presenting a working image to indicate an action is being performed, you might have other uses for it.

Below is an example of two different images being rotated. One of the images is rotated in three places, each with a different speed.

   

Dismiss

Any Image
Any Speed

The example images above have transparent backgrounds. The background color gradient shows through the transparent parts of the rotating images.

The first image, the image composed of dots following each other, with the lead dot chasing its tail, is set up to make one complete revolution every 4 seconds.

The next image is presented three times. The first instance is also set up to rotate once very 4 seconds. The second image, however, is set up to rotate every second. And the third image to rotate every quarter of a second.

Implementing a Rotating Image

Implementation requires a bit of CSS and an image tag.

Here is the CSS.

<style type="text/css">
.working-image { -webkit-animation:rotation 2s infinite linear; }
@-webkit-keyframes rotation {
   from { -webkit-transform:rotate(0deg); }
   to   { -webkit-transform:rotate(359deg); }
}
</style>

The working-image class is for the image tag (you'll see example image tag code a bit further below).

The 2s specifies how fast the image rotates, 2s being 2 seconds. The amount of time may be specified as a decimal number. Examples are 1.5s (1½ seconds) and .25s (¼ of a second).

Here is the example image tag.

<img class="working-image" src="https://willmaster.com/images/workingSpinnerTemp.png">

As before, working-image is the image class name. If the class name is changed, it must also be changed in the CSS.

https://willmaster.com/images/workingSpinnerTemp.png is the src URL of the image. Replace the URL with the URL of the image you are rotating.

You are now good to go.

If you wish to place more images with the same rotation, give them the same class name.

But if additional images need a different rotation, you'll need to make another class name CSS for the image. The @-webkit-keyframes CSS at−rule, however, does not need to be repeated for each class name. Once will do.

Any image can be continuously rotated at any speed. Your imagination is likely to come up with additional ways to use the functionality.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager