Create and Customize the React Bootstrap Progress Bar Example

Friends, in this tutorial, we will get to learn how to create and customize the React Bootstrap progress bar. In addition, we will learn to integrate the progress bar in React app and display the progress in the percentage value.

We will create the progress bar with the help of React Bootstrap Library. We will use the non-complicated React Bootstrap Package that will lessen the Bootstrap jQuery complications.

As we know that the progress bar is an essential UI element since it displays the progress of the current event. Based on the GUI terminology, the user gets to know about the progress done. With the help of this, the progress of downloading or uploading a file, data submission, ticket booking for movies, buses, trains can be seen easily.

There is a horizontal line in a progress bar that is filled with color. It keeps on filling with another color which keeps on updating the current status of the event.

 

How To Create And Customize The React Bootstrap Progress Bar Example

The following steps are done for implementing the above mentioned:

Step 1: Install the React Application

The very first step is to run the given command in order to install the React js application.

npx create-react-app react-prog-bar-tutorial

 

Now, we move to the project root:

cd react-prog-bar-tutorial

 

Then, we start the application:

npm start

Step 2: Install the React Bootstrap Library

In this step, we execute the below-given command for installing the React-Bootstrap and the Bootstrap packages concurrently.

npm install react-bootstrap bootstrap

 

Step 3: Include Bootstrap 4 Progress Bar in React

Here, we give precedence to ProgressBar API, we import Progress Bar and Button Services from the react-bootstrap library. With this, we can implement the Progress Bar without any complications.

 

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

We also add the given code in src/App.js file:

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

 

Step 4: Basic Progress Bar With React Bootstrap

We can simply invoke a simple progress bar by using the ProgressBar directive; the property takes a numerical value from 0 to 100 for displaying the progress status of the ongoing event.

We add the given 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;

 

Step 5: Display Percentage Value Within Progress Bar

It becomes easy with label property to show the progress value inside the progress bar. To display the percentage within, include the label prop in ProgressBar.

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

 

Step 6: Creating Animated Progress Bar

We use the animated prop for using the animation which creates stripes from right to left. However, it does not 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;

 

Step 7: Adding Colors And Stripes in the Progress Bar

In Bootstrap’s progress bar, we can add default colors and stripes. The options for adding colors are success, info, warning, danger. The striped prop also adds stripes in the progress bar.

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

 

Step 8: Stacked Progress Bar

We create the stacked progress bar to show various colors. We will add the given 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;

Conclusion

So, in this guide, we have learned how easy and quick it is to implement and customize the progress bar in a React Application using the React Bootstrap Package. We hope that you surely have gained ample knowledge about the same for use in your next react app.

 

Thanks