How to create a custom progress bar component in React.js ?

30 Jun, 2021
In this article, We will make a custom reusable Progress bar component using React.js 
Prerequisites: 
Basic Knowledge of React
Basic Knowledge of HTML/CSS
Inline styling in React
The <Progressbar /> component should do the following:
Indicates the progress visually to the user via the colored bar.Shows the percentage numerically as a %Props that allow you to change the height, width, and background color of the progress bar .
Indicates the progress visually to the user via the colored bar.
Shows the percentage numerically as a %
Props that allow you to change the height, width, and background color of the progress bar .
Basically, the progress bar consists of a parent div, which represents the whole progress bar, and a child div in which the completed part of the bar along with the span will show the completed percentage number.
 
Props:
bgcolor: It will change the background color of the progress bar .
progress:  It will have value between 1 to 100 .
height: It is used to change the height of the progress bar .
Creating React Application And Installing Module:
Step 1: Create a React application using the following command 
npx create-react-app progress_bar
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd Progress_bar
Step 3: Add a Progress_bar.js file  in the Component folder and then  import  the Progressbar component in App.js
Project Structure: It will look like the following.
Folder structure
Step 4: Now let create the Progress bar in  Progress_bar.js 
Progress_bar.js
import React from 'react'  const Progress_bar = ({bgcolor,progress,height}) => {         const Parentdiv = {        height: height,        width: '100%',        backgroundColor: 'whitesmoke',        borderRadius: 40,        margin: 50      }            const Childdiv = {        height: '100%',        width: `${progress}%`,        backgroundColor: bgcolor,       borderRadius:40,        textAlign: 'right'      }            const progresstext = {        padding: 10,        color: 'black',        fontWeight: 900      }            return (    <div style={Parentdiv}>      <div style={Childdiv}>        <span style={progresstext}>{`${progress}%`}</span>      </div>    </div>    )}  export default Progress_bar;
Step 5: Lets Render the Progress bar component by importing the Progress_bar component into.
App.js
import './App.css';import Progressbar from './Component/Progress_bar';  function App() {  return (        <div className="App">     <h3 className="heading">Progress Bar</h3>      <Progressbar bgcolor="orange" progress='30'  height={30} />      <Progressbar bgcolor="red" progress='60'  height={30} />      <Progressbar bgcolor="#99ff66" progress='50'  height={30} />      <Progressbar bgcolor="#ff00ff" progress='85'  height={30} />      <Progressbar bgcolor="#99ccff" progress='95'  height={30} />   </div>       );}  export default App;
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:
Progress bar in react
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.