'Loading' Icon Animation With CSS

Here are steps to make an animation to indicate content is loading:

1. Make an image to rotate.
2. Rotate it with CSS.
3. Smile.

The code in this article was made to rotate an icon image, although the code can be used to rotate any image. In other words, you might have other uses for it.

The image you specify rotates continuously at a speed you specify.

The following demonstration rotates an icon 360° every 2.5 seconds.

Before I present the code, I want to mention that there are pure CSS loading animations. A search for "CSS loading code" should reveal a bunch. In general, no image is required for those, but they are limited to what CSS can do by itself. I like a bit more flexibility. Which is why I rotate an image.

Here is the code for the above demonstration.

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

<!-- Place the image where you want the icon positioned when it is animated. -->
<div style="text-align:center;">
<img class="loading-image" src="https://willmaster.com/images/loadingicon.png" style="width:50px; height:50px;">
</div>

Implementing Icon Animation With CSS

As you can see, there are two parts in the above source code. There is (i) the CSS and (ii) the image. Go ahead and place the image where you want it to rotate, then do the rest of the implementation.

1. The CSS class is named loading-image and is used in both the CSS and in the img tag. If the CSS class name is changed, both places in the code need to be changed.

2. The 2.5s is within the value of the CSS loading-image definition. The value specifies the amount of time to elapse for each complete rotation. 2.5s means 2.5 seconds. Change the number as appropriate for your implementation.

The icon animation has been implemented. Try it in your browser.

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