How to build an animated loading spinner

Loading spinners are a great way to provide user feedback during waiting periods. This can signal to a user that your website has not crashed and is processing information.

The original way to create loading spinners for the web was by using animated GIFs. Animated GIFs can have weight issues. This is due to the number of frames that are required to produce an animated GIF of a loading spinner. They also don’t provide the best quality image especially on newer, more prevalent high-res displays.

With the rise of modern technologies such as CSS3, I will walk you through the steps of creating a modern day loading spinner.

What exactly are we going to achieve?

We will be creating a spinner element in HTML that will continuously spin, with CSS.

Step 1 : Create the loader element

For this walkthrough, we will be using just HTML and CSS to create and style our loader element.

You can achieve more complex and customized spinner elements by using SVG. You can see at the end of the article what needs to be adapted to achieve this using a custom SVG.

HTML

The HTML for the spinner is a simple <div> with an id to target it in CSS.

CSS

Then we style this <div>. Ours will be a simple circle with a quarter of it highlighted brighter than the rest. To achieve this we set one of the borders a brighter color than the rest of the borders. With the width and height being even, setting the border-radius:50% will turn the <div> into a circle.

What have we created to this point?

You should see something similar to the circle below. I have added an extra background-color to the body so you can see the white loading circle on the background-color. You can choose a color that suits your preference or brand.

Step 2 : We add the rotation animation

We will now add the necessary CSS to start the spinner element spinning.

CSS

We will be using the CSS3 @keyframes rule. With this rule, you can specify the CSS property values you want the animation to go from and to. We can then loop this animation an infinite amount of time by setting animation-iteration-count: infinite.

Putting it altogether

And that’s all there is to it. You can see the final output below, alongside an example of a more complex SVG image as the element.

See the Pen Simple HTML Spinner by Stephen Delaney (@sdelaney) on CodePen.

How to use a custom SVG as your spinner

You can see above in the working example I’ve included a custom SVG icon and you might be wondering how to use one yourself.

It’s quite simple really. You just have to remove the HTML and CSS from step 1, and insert your own custom SVG image into your HTML, either inline or with a <img> tag.

HTML

Inline SVG

SVG as <img>

Since we have changed the id of the SVG to svg-spinner we will then have to replace #html-spinner in step 2 with #svg-spinner.