Create a Spinner Loader in React using CSS

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 called spinner.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 class loader. 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 added border:10px solid #f3f3f3 property to create the gray circle and border-top: 10px solid #3498db to create the blue colored arc on top of the gray colored circle. After that border-radius: 50% property to make it circular and have given same amount of height & width.

Now, to add the spinning effect we've added animation: 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 using transform: 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!

Comments

[Steve Steinitz]

Really nice, stand alone and easy to tweak. Bravo and thank you.