Open In App

How to show LinearProgress in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

A Linear progress bar shows the measure of progress of any task or activity Linearly. It is the graphical representation of linear progression. Material UI for React has this component available for us, and it is effortless to integrate.

Prerequisites:

Approach:

To show LineatProgress in React JS we will install the material UI package. Import the LinearProgress Component in the project and display linear progress with the value and variant parameters as required.

Steps to create React Application and Installing Module:

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

npx create-react-app foldername

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

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core

Project Structure:

Screenshot-from-2023-11-07-10-47-52

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

"dependencies": {
"@material-ui/core": "^4.12.4",
"@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-scripts": "5.0.1",
"sass": "^1.69.5",
"web-vitals": "^2.1.4"
}

Example: This example uses Material UI LinearProgress Component to show the progrees line in React JS

Javascript




// Filename - App.js
 
import React from "react";
import LinearProgress from "@material-ui/core/LinearProgress";
 
export default function App() {
    const [countOfProgress, setCountOfProgress] =
        React.useState(0);
 
    React.useEffect(() => {
        const timer = setInterval(() => {
            setCountOfProgress((oldProgress) => {
                if (100 == oldProgress) return 0;
                return Math.min(
                    oldProgress + Math.random() * 10,
                    100
                );
            });
        }, 499);
 
        return () => {
            clearInterval(timer);
        };
    }, []);
 
    return (
        <div>
            <h4>How to show LinearProgress in ReactJS?</h4>
            <LinearProgress
                variant="determinate"
                value={countOfProgress}
            />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.



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