Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 30 Jun, 2021
Improve Article
Save Article

In this article, We will make a custom reusable Progress bar component using React.js 


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



  • 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 


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,
        textAlign: 'right'
      const progresstext = {
        padding: 10,
        color: 'black',
        fontWeight: 900
    return (
    <div style={Parentdiv}>
      <div style={Childdiv}>
        <span style={progresstext}>{`${progress}%`}</span>
export default Progress_bar;

Step 5: Lets Render the Progress bar component by importing the Progress_bar component into.


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} />
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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!