Hi Folks,

In this article, we'll talk about how to create a spinner loader in React using pure CSS.

We will be creating a loader as shown below -

Let's start creating a file calledspinner.js in the react project and add some JSX to it for the loader.

File: Spinner.js

const Spinner = () => <div className="loader"></div>;export default Spinner;

Let's understand the above code -

Here, we have created a functional component called Spinner. Which is returning a div element with a classloader. That's all the JSX required for it.

Now, Let's add css for it.

.loader {  border: 10px solid #f3f3f3;  border-top: 10px solid #3498db;  border-radius: 50%;  width: 80px;  height: 80px;  animation: spin 1s linear infinite;}

Let's understand the above CSS -

We've addedborder:10px solid #f3f3f3 property to create the gray circle andborder-top: 10px solid #3498db to create the blue colored arc on top of the gray colored circle. After thatborder-radius: 50% property to make it circular and have given same amount of height & width.

Now, to add the spinning effect we've addedanimation: spin 1s linear infinite.

It will look like this -

Let's add the final CSS to create the spinning effect-

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

Let's understand the final CSS -

Here, we have added keyframes for the spin animation. Where we are rotating the element usingtransform: rotate() property from 0 degree to 360 degree.

Finally, Our Sinnner loader is ready.

That was it from this article. Do share your comments and feedback about the article.

Find the code below.

Keep learning!