Bouncing dots Loader in React

Hi Folks,

Loading component is a very common requirement in react to represent the loading state. In this tutorial, I will explain how you can create bouncing dots loader using CSS.

We will be creating a loader as shown below -

Let's get started -

For this tutorial, I'm assuming you already have a React project setup ready with you.

Now, let's create a BouncingDotsLoader component in React and add JSX to create those three dots.

BouncingDotsLoader.js

import React from "react";

const BouncingDotsLoader = (props) => {
  return (
      <div className="bouncing-loader">
        <div></div>
        <div></div>
        <div></div>
      </div>
  );
};

export default BouncingDotsLoader;

Let's understand the above code-

Here, I have created an outer div container to wrap all the
three identical dots with class bouncing-loader. To create these three dots, I've added three div element inside this container.

Now, Let's add CSS to style the dots-

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 16px;
  height: 16px;
  margin: 3px 6px;
  border-radius: 50%;
  background-color: #a3a1a1;
  opacity: 1;
  animation: bouncing-loader 0.6s infinite alternate;
}

Let's understand the above CSS -

I've added display: flex and justify-content: center to bouncing-loader class to make those dots inline & center. Also, added CSS to bouncing-loader > div to style each dot with an animation shortand property with value bouncing-loader 0.6s infinite alternate representing CSS properties animation-name animation-duration iteration-count animation-direction.

It will look like this -

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

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translateY(-16px);
  }
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

Let's understand the final CSS -

I've added keyframes to the bouncing-loader animation at start point with opacity: 0.1 & transform: translateY(-16px) & delayed the animation for second and third dot with 0.2 & 0.4 seconds respectively.

This way, Our very simple bouncing dots loader is ready.

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

Find the code below.

Keep learning!