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>neveropen</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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
