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 .
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
