How to add Spinner to React project

To add a loading spinner to a React project, you can follow these steps:

Approach 1: Use an existing library

Choose a loading spinner library: There are many loading spinner libraries available for React, such as React Spinners, React Loading, and React Lottie. Choose one that suits your needs and install it in your project using npm or yarn.

For example, if you want to use React Spinners, you can install it by running:

npm install react-spinners

Import the spinner component: Once you have installed the library, import the spinner component into the file where you want to use it.

For example, if you want to use the BeatLoader component from React Spinners, you can import it like this:

import { BeatLoader } from 'react-spinners';

Use the spinner component: Use the spinner component in your JSX code where you want to display the spinner. Typically, you will show the spinner while some data is being loaded, and hide it once the data is loaded.

Here's an example of how you can use the BeatLoader component from React Spinners:

import { BeatLoader } from 'react-spinners';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(data => {
      setData(data);
      setIsLoading(false);
    });
  }, []);

  return (
    <div>
      {isLoading ? (
        <BeatLoader color="#123abc" />
      ) : (
        <div>
          {/* display the loaded data */}
        </div>
      )}
    </div>
  );
}

In this example, we're using the BeatLoader component from React Spinners to display a loading spinner while the fetchData() function is being called. Once the data is loaded, we hide the spinner and display the loaded data.

You can customize the appearance and behaviour of the spinner by passing props to the spinner component. For example, you can change the colour of the spinner by passing a colour prop to the BeatLoader component.

Approach 2: Create a custom spinner component

If you prefer to create your custom spinner component, you can follow these steps:

Create a new file called Spinner.js in your components directory.
Define the Spinner component in the file:

import React from "react";

function Spinner() {
  return (
    <div className="spinner-container">
      <div className="spinner"></div>
    </div>
  );
}

export default Spinner;

Add CSS styles to the Spinner component: The container div is styled to centre the spinner in the middle of the parent element. The inner div is styled to create a circular shape with a border and to rotate continuously using a CSS animation.

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #33a;
  animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

Import the Spinner component in your React component and render it:

import React from "react";
import Spinner from "./Spinner";

function MyComponent() {
  return (
    <div>
      <h1>Loading...</h1>
      <Spinner />
    </div>
  );
}

export default MyComponent;

That's it! Now you have a custom spinner component that you can use throughout your React project. The Spinner component is highly customizable - you can adjust the size, color, and animation speed by modifying the CSS styles.

How to add Spinner to React project

Table of contents

Approach 1: Use an existing library

Approach 2: Create a custom spinner component