How to show LinearProgress in ReactJS ?
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:
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.