Thursday, September 4, 2025
HomeLanguagesHow to create a custom progress bar component in React.js ?

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

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:

  1. Indicates the progress visually to the user via the colored bar.
  2. Shows the percentage numerically as a %
  3. 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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32263 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6627 POSTS0 COMMENTS
Nicole Veronica
11799 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11858 POSTS0 COMMENTS
Shaida Kate Naidoo
6749 POSTS0 COMMENTS
Ted Musemwa
7025 POSTS0 COMMENTS
Thapelo Manthata
6696 POSTS0 COMMENTS
Umr Jansen
6716 POSTS0 COMMENTS