React Bootstrap Progress Bar Example: Create & Customize Progress Bar in React with React Bootstrap

Last updated on by Digamber

Bear with me, through out this tutorial i will to show you how to integrate progress bar in React application and display the progress in percentage value and we will create the progress bar with the help of React Bootstrap library.

The progress bar is an essential UI element; it displays the current event’s progress or let the users understand how much progress has been done based on GUI terminology. It could be used for seeing the progress of downloading or uploading a file, submitting data, booking movies, bus or train tickets, etc.

In progress bar is a horizontal line filled with color; it keeps on filling with another color based on the current progress is made and indicate the user about the event status.

In this tutorial, we will use the bootstrap progress bar UI component to implement progress bars in React application, and we will use the non-complicated React Bootstrap package to lower down the Bootstrap jQuery complications.

Install React Application

Run command to install the fresh React js application. Skip this step, If app is already installed.

npx create-react-app react-progress-bar-example

Please move to the project root.

cd react-progress-bar-example

Start the application:

npm start

Install React Bootstrap Library

Execute the command to install react-bootstrap and Bootstrap packages concurrently.

npm install react-bootstrap bootstrap

Include Bootstrap 4 Progress Bar in React

Now, give precedence to ProgressBar API, we need to import Progress Bar and Button services from the ‘react-bootstrap’ library. It lets you implement the Progress bar without any complications.

Also, add the bootstrap.min.css file to harness the power of Bootstrap styling.

Add the given below code in src/App.js file.

import { ProgressBar, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Output:

Bootstrap 4 Progress Bar in React

Basic Progress Bar with React Bootstrap

A simple progress bar can be invoked using the ProgressBar directive; the now property takes numerical value from 0 to 100 to display the progress status.

Add the following code in src/App.js file.

// App.js

import React from 'react';
import './App.css';

import { ProgressBar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  
  const percentage = 73

  return (
    <div className="progressBar">
      <h3>React Bootstrap Progress Bar Demo</h3>

       <ProgressBar now={percentage} />
    </div>
  );
}

export default App;

Display Percentage Value within Progress Bar

Often we need to show the progress value inside the progress bar, it is easy with label property. Include label prop in ProgressBar directive to display the percentage within.

// App.js

import React from 'react';
import './App.css';

import { ProgressBar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  
  const percentage = 73

  return (
    <div className="progressBar">
       <ProgressBar now={percentage} label={`${percentage}% completed`} />
    </div>
  );
}

export default App;

Result:

Display Percentage Value within Progress Bar

Creating Animated Progress Bar

Adding animation can be done using the animated prop; it creates stripes from right to left; however it doesn’t work in IE 9.

// App.js

import React from 'react';
import './App.css';

import { ProgressBar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  
  const percentage = 73

  return (
    <div className="progressBar">
       <ProgressBar now={percentage} animated/>
    </div>
  );
}

export default App;

Creating Animated Progress Bar

Adding Colours & Stripes in Progress Bar

You can add default colors and stripes in Bootstrap’s progress bar; here are the options for adding colourssuccess, info, warning, danger. Also, striped prop adds the stripes in progress bars.

// App.js

import React from 'react';
import './App.css';

import { ProgressBar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="progressBar">
        <ProgressBar striped variant="success" now={30} />
        <ProgressBar striped variant="info" now={40} />
        <ProgressBar striped variant="warning" now={50} />
        <ProgressBar striped variant="danger" now={60} />
    </div>
  );
}

export default App;

Adding Colours in Progress Bar

Stacked Progress Bar

Create stacked progress bar and show various colours, add the following code in src/App.js file.

// App.js

import React from 'react';
import './App.css';

import { ProgressBar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="progressBar">
        <ProgressBar>
          <ProgressBar striped variant="success" now={45} key={1} />
          <ProgressBar variant="warning" now={25} key={2} />
          <ProgressBar striped variant="danger" now={15} key={3} />
        </ProgressBar>
    </div>
  );
}

export default App;

Stacked Progress Bar

Summary

So this was it; we have seen how to quickly implement Progress Bar in React application using React Bootstrap package, also shed light on customizing the progress bars.

You can check out the complete properties of the React Bootstrap progress bar here.