Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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;


Step to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.

Peek-2023-11-02-16-08



Last Updated : 03 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads