How to create animated progress bar using react-bootstrap ?

Last Updated : 25 Jul, 2024

A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar on a web page using

ProgressBar from 'react-bootstrap/ProgressBar
Predefined bootstrap classes.:

Here in this article, we will learn to build a progress bar in React using Bootstrap classes

Prerequisites:

Steps to Create the React Application And Installing Module:

Step 1: Create a react application using the following command

npx create-react-app foldername

Step 2: Once it is done change your directory to the newly created application using the following command

cd foldername

Step 3: Install Bootstrap dependency

npm install bootstrap

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file

JavaScript

import Progress from "./Progress";
function App() {
    return (
        <div className="App">
            <Progress />
        </div>
    );
}

export default App;

JavaScript

import React from "react";
import ProgressBar from 'react-bootstrap/ProgressBar'
function Progress() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                <center>GeeksforGeeks</center>
            </h1>

            <div class="container">
                <div className="progress-bar bg-primary
                            progress-bar-striped
                            progress-bar-animated"
                    style={{ width: '50%' }}>50%</div>
                <br></br>
                <div className="progress-bar bg-success
                            progress-bar-striped 
                            progress-bar-animated"
                    style={{ width: '90%' }}>90%</div>
                <br></br>
                <div className="progress-bar bg-warning 
                            progress-bar-striped
                            progress-bar-animated"
                    style={{ width: '30%' }}>30%</div>
                <br></br>
                <div className="progress-bar bg-danger
                            progress-bar-striped 
                            progress-bar-animated"
                    style={{ width: '10%' }}>10%</div>
                <br></br>
                <div className="progress-bar bg-info 
                            progress-bar-striped 
                            progress-bar-animated"
                    style={{ width: '70%' }}>70%</div>
            </div>
        </div>
    )
}

export default Progress;

Step to Run the application: Enter the following command to run the application.