Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create animated progress bar using react-bootstrap ?

  • Last Updated : 30 Nov, 2021

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

Create React Steps: To build a react application follow the below steps:

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

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

npm start

Project Structure:

App.js




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

Progress.jsx




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;

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!