How to create a loading spinner with HTML and CSS

Often, you might build a web app that requires data from some backend server before it can display this data.
The time it takes the render this data on the webpage depends on the strength of the network and the architecture of the webpage among other things.
However, it would be a very poor user experience if there is no intermediate user interface that makes the user know that his/her request is processing.
Assume you click on login on one of your social media accounts and it just stayed like that and all of a sudden, you find yourself on your homepage, won't that feel a little awkward?

For this reason, all standard websites have an indicator that shows that a certain request is being processed.

In this article, I'd teach you how to make a simple loading spinner that you can incorporate into your project.

Prerequisites:

To be able to follow this article, the following are required:

• Any code editor

• Basic understanding of HTML and CSS

• Basic understanding of CSS animations

Step one

Create a div element with a class spinner as shown below:

<div class='spinner'></div>

Step two

Add CSS styles to achieve the required effect:

div.spinner{
  width:50px;
  height:50px;
  border-radius:50%;
  border:5px solid transparent;
  border-left-color: #45CFDD;
  border-right-color: #45CFDD;
}

Let's go through the code line by line:

1. First of all, select the div element with any selector you like

2. Set the width and height of the div to any length you want. I used 50px for each.
   Make sure the width and height are the same.

3. Set the border-radius property to 50%. This makes the div circular in shape.

4. Give the div a solid border 5px wide with a transparent color. The transparent color just makes sure it takes the background of its parent element.

5. Give two opposite borders the same color.

Notes:

• I used border-left and border-right. You could also use border-top and border-bottom.

• I used the color #45CFDD, you can use anyone you wish. It's just all about preference.

• If you use exactly the same code as mine, you should have something like this:

Step three

Add animation property to the div element:

 div.spinner{
...
animation: loading 1.5s linear infinite
}

Add the animation property to the div element. The values of the animation property are:

• loading: That's a variable name used to identify the animation.

• 1.5s: This is the type taken to complete one animation.

• linear: This means that the animation should have the same speed throughout.

• infinite: This means the animation should continue infinitely.

NB:
There are other properties that are not mentioned here. It's just because they are irrelevant to this project.

Step four

Define the required animation.

@keyframes loading{
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform:rotate(360deg)
  }
}

Here, we used the @keyframe keyword, then followed by the animation name we used in step three.

At 0% (the start), we set its transform property to rotate(0deg). This means that when the page first loads, the div won't be rotated yet.

Then at 100% (end), the div should have rotated by 360 degrees.

So in the end, we should have something like this:

Conclusion

This is just one way to approach this problem. There are multiple ways the same effect can be achieved. Try to play with the different values and see what you can come up with.