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.

1

<div id="html-spinner"></div>

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.

1

2

3

4

5

6

7

#html-spinner{

width:40px;

height:40px;

border:4pxsolid#fcd779;/*Default circle color*/

border-top:4pxsolidwhite;/*Highlighted color*/

border-radius:50%;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

#html-spinner{

/*Code from previous step*/

width:40px;

height:40px;

border:4pxsolid#fcd779;

border-top:4pxsolidwhite;

border-radius:50%;

/*Added Code from here down*/

/*Animation code for older Chrome, Safari, Opera*/

-webkit-transition-property:-webkit-transform;

-webkit-transition-duration:1.2s;

-webkit-animation-name:rotate;

-webkit-animation-iteration-count:infinite;

-webkit-animation-timing-function:linear;

/*Animation code for older Firefox*/

-moz-transition-property:-moz-transform;

-moz-animation-name:rotate;

-moz-animation-duration:1.2s;

-moz-animation-iteration-count:infinite;

-moz-animation-timing-function:linear;

/*Default animation code*/

transition-property:transform;

animation-name:rotate;/*Call to @keyframe rule*/

animation-duration:1.2s;/*Change to speed up or slow down the animation*/

animation-iteration-count:infinite;/*Make the animation go forever*/

animation-timing-function:linear;

}

/*keyframes rule for older Chrome, Safari, Opera*/

@-webkit-keyframes rotate {

from {-webkit-transform:rotate(0deg);}

to {-webkit-transform:rotate(360deg);}

}

/*keyframes rule for older Firefox version*/

@-moz-keyframes rotate {

from {-moz-transform:rotate(0deg);}

to {-moz-transform:rotate(360deg);}

}

/*Default @keyframes rule*/

@keyframes rotate {

from {transform:rotate(0deg);}

to {transform:rotate(360deg);}

}

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.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland