Open In App

Adding spinners using react-spinners-kit package in React JS

Improve
Improve
Like Article
Like
Save
Share
Report

Discover how to elevate your React.js applications by seamlessly integrating and customizing dynamic spinners from the react-spinners-kit package. This article offers a concise, step-by-step guide to enhancing user experience through engaging loading indicators in your React projects.

Prerequisites:

Approach:

  • Import Dependencies:
    • Import stylesheets (‘App.css’).
    • Import useState from React.
    • Import spinner components from “react-spinners-kit”.
  • Manage Component State:
    • Use the useState hook to manage the loading state, initially set to true.
  • Render Spinners:
    • Create an App component.
    • Render a set of spinners within a container using different components from “react-spinners-kit”.
    • Customize each spinner with specific props based on the loading state.
  • Styling and Export:
    • Include a paragraph with the class “tag” for text display.
    • Export the App component as the default export.
    • Apply appropriate styling using the defined stylesheets.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app spinner-kit

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd spinner-kit

Step 3: After creating the React application, Install the react-spinner-kit package using the following command:

npm i react-spinners-kit

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-spinners-kit": "^1.9.1",
"web-vitals": "^2.1.4",
}

Example: Below is the practical implementation of the react-spinners-kit package.

Javascript




//App.js
import './App.css';
import { useState } from 'react';
import {
    PushSpinner, TraceSpinner, RainbowSpinner,
    RingSpinner, SwishSpinner, PongSpinner,
    MetroSpinner, JellyfishSpinner
}
    from "react-spinners-kit";
 
function App() {
    const [loading, setLoading] = useState(true)
    return (
        <>
            <p className='tag'>Spinners using react-spinners-kit</p>
 
            <div className="spinnerContainer">
 
                <div className="spinner">
                    <PushSpinner size={30} color="#00ff89"
                        loading={loading} />
                </div>
                <div className="spinner">
                    <TraceSpinner size={40} frontColor="green"
                        backColor="white" loading={loading} />
                </div>
 
                <div className="spinner">
 
                    <RainbowSpinner size={50} color="purple"
                        loading={loading} />
                </div>
                <div className="spinner">
                    <RingSpinner size={50} color="yellow"
                        loading={loading} />
                </div>
                <div className="spinner">
                    <SwishSpinner size={40} frontColor="blue"
                        backColor="white" loading={loading} />
                </div>
                <div className="spinner">
                    <PongSpinner size={60} color="pink"
                        loading={loading} />
                </div>
                <div className="spinner">
                    <MetroSpinner size={40} color="white"
                        loading={loading} />
                </div>
                <div className="spinner">
                    <JellyfishSpinner size={40} color="grey"
                        loading={loading} />
                </div>
            </div>
        </>
    );
}
 
export default App;


CSS




.spinnerContainer {
    margin: auto;
    width: 50%;
    height: 50%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    background-color: black;
    display: flex;
    align-items: center;
    flex-direction: row;
    border-radius: 10px;
    flex-wrap: wrap;
    box-shadow: 0px 8px 8px rgba(23, 22, 22, 0.296);
}
 
.spinner {
    margin: 5%;
    padding: 20px;
    border: 1px solid rgb(55, 53, 53);
}
 
.tag {
    text-align: center;
    font-size: 2rem;
    color: green;
}


Step to Run the application: Run the application by using the following command:

npm start 

Output: By default, the React project will run on port 3000

Output



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