How to use loading animation by using the react-loader-spinner through npm ?

Last Updated : 03 Nov, 2023

In React, loading animation by using the react-loader-spinner enhances the user experience and provides visual feedback during these loading periods. For the asynchronous operations and data fetching it works as a visual representation of the process until the data is loaded. React developers can easily add loading animations to their applications by utilizing the react-loader-spinner available through npm.

The react-loader-spinner is an npm package that provides a simple and attractive SVG spinner component that can be used in any of your projects. The spinner in react-loader-spinner is used to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the propeTypes available in the react-loader-spinner.

Syntax:

<TailSpin   // Type of spinner
    height="80"
    width="80"
    color="#4fa94d"
    ariaLabel="tail-spin-loading"
    radius="1"
    wrapperStyle={{}}
    wrapperClass=""
    visible={true}
/>

Types of spinner: All types of spinner can be used similarly you just need to change the type of the loader.

Audio
Ball-Triangle
Bars
Circles
Grid
Hearts
Oval
Puff
Rings
TailSpin
ThreeDots

PropTypes: All types of spinners accept these props.

visible: It is a boolean value that defines whether the spinner should be visible or not, the default value is false.
type: This prop defines the spinner type.
height: This prop defines the height of the SVG spinner and the default value is 80.
width: This prop defines the width of the SVG spinner and the default value is 80.
color: This prop defines the color of the spinner.
secondaryColor: This prop is available on the plane and mutatingDots loaders.
timeout: This defines the effective time of the spinner.
radius: This prop set the radius of the spinner.

Steps to create React Application

Step 1: Create the React app using the command.

npx create-react-app foldername

Step 2: Now move into your project folder i.e. foldername by using this command.

cd foldername

Step 3: Now install the package into your project folder.

npm install react-loader-spinner

Project Structure:

The updated dependencies after installing packages

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-loader-spinner": "^5.4.5",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
}

Example: This examle uses the loader from react-loader-spinner to show the loading animation while loading the components.

JavaScript

// Filename - App.js

import { useState } from "react";
import Loader from "./loader";

function App() {
    const [isLoading, setIsLoading] = useState(true);

    setTimeout(() => {
        setIsLoading(false);
    }, 2000);
    return (
        <div
            style={{
                textAlign: "center",
                margin: "auto",
            }}
        >
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            {isLoading ? (
                <div
                    style={{
                        width: "100px",
                        margin: "auto",
                    }}
                >
                    <Loader />
                </div>
            ) : (
                <div>
                    <h3>
                        React Example to Implemet Loader
                        using react-loader-spinner
                    </h3>
                </div>
            )}
        </div>
    );
}

export default App;

JavaScript

// Filename - loader.js

import { TailSpin } from "react-loader-spinner";
const LoaderComp = () => {
    return (
        <TailSpin
            height="80"
            width="80"
            color="#4fa94d"
            ariaLabel="tail-spin-loading"
            radius="1"
            wrapperStyle={{}}
            wrapperClass=""
            visible={true}
        />
    );
};  
export default LoaderComp;