Creating a Stunning Animated Dots Loader React Component

In modern web development, loading animations play a crucial role in enhancing user experience. Creating an animated dots loader React component not only adds a touch of elegance to your application but also helps users understand that content is being loaded. In this article, we’ll walk you through the process of designing a stylish animated dots loader component using React, and we’ll explore various techniques to make it visually appealing.

Complete source code for this react component is available in github repository.

Below is a demo showcasing the appearance of our animated dots loader React component:

Table of Contents:

Setting up the Project

Begin by setting up your React project using either create-react-app or any other preferred method. This will provide you with a base structure to build the animated dots loader react component.

Creating the Loader Component

Create a new file, let’s call it DotsLoader.js, and define the functional component for the animated dots loader.

import React from 'react';
import './DotsLoader.css';

const DotsLoader = () => {
  return (
    <div className="dots-loader">
      <span className="dot"></span>
      <span className="dot"></span>
      <span className="dot"></span>
    </div>
  );
};

export default DotsLoader;

1. The first step is we import the React library. This is necessary because we are creating a React component.
2. Next, we defined the DotsLoader component as a functional component. Functional components are simpler and concise ways of creating React components, especially when the component doesn’t require state or lifecycle methods.
3. Inside the DotsLoader component, we define the JSX markup that represents the visual elements of our animated dots loader. In this case, we have three dots represented by span elements.
4. We apply CSS classes to style the dots-loader container and individual dot elements. These classes will later be defined in a separate CSS file.

Styling the Loader

Now, let’s add some style to the component. Create a new file named DotsLoader.css and apply the following styles:

.dots-loader {
  display: flex;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #007bff; /* You can use any color you prefer */
  margin: 0 6px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

• We start by defining the .dots-loader class selector, which represents the container that holds the three dots.
• display: flex; is used to create a flex container, making the dots align in a row horizontally.
• align-items: center; centers the dots vertically within the container.
• The .dot class selector represents each individual dot within the loader.
• width: 12px; and height: 12px; set the dimensions of the dots to be 12 pixels, creating small circles.
• border-radius: 50%; gives the dots a circular shape by setting their border radius to 50%, making them perfectly round.
• background-color: #007bff; defines the color of the dots. You can customize this to any color of your choice using a valid color code.
• margin: 0 6px; adds a small 6-pixel margin to the left and right of each dot, providing some spacing between them.
• animation: pulse 1.5s infinite ease-in-out; applies the animation named pulse to the dots. The animation will run infinitely with a duration of 1.5 seconds and an ease-in-out timing function.
• We define the pulse animation using @keyframes.
• The animation consists of two keyframes: 0% and 100%, and 50%.
• At 0% and 100%, the dots will have their default size (scale(1)), creating a steady state.
• At 50%, the dots will have a slightly larger size (scale(1.3)), creating a momentary expansion effect.
• The animation then loops smoothly between these keyframes, creating a pulsating effect for the dots.

Overall, the DotsLoader.css file brings life to our DotsLoader component by styling the container and dots using CSS. The combination of the dots-loader container styles and the pulse animation on the dot elements creates an elegant and visually pleasing animated dots loader effect in our React component.

Integrating the react component

To use the animated dots loader component, import it into your desired React component and render it where loading is required. Lets integrate our react component in App.js:

import React, { useState, useEffect } from 'react';
import DotsLoader from './DotsLoader';

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate data loading delay for demonstration purposes
    const timer = setTimeout(() => {
      setLoading(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {loading ? <DotsLoader /> : <div>Content Loaded!</div>}
    </div>
  );
};

export default App;

Congratulations! You have successfully created a stylish animated dots loader React component. By following the steps outlined in this article, you’ve not only improved the visual appeal of your application but also enhanced user experience during loading times. Feel free to customize the styles further and integrate the loader into your projects to create a seamless user interface.

Remember to keep the loader lightweight and optimize its performance to ensure a smooth user experience across various devices and network conditions. Happy coding!

By Kurukshetran

Discover more react components like below

1. Carousel React Component
2. Custom Popup Menu for Selected Text
3. Toggle Button React Component