How to create a progress bar using bootstrap ?
Last Updated :
22 Jul, 2024
Bootstrap is an open-source framework used to design responsive websites which are easy and efficient to use. It has ready-made templates which can be used to design web pages in a limited time.
What is a progress bar?
A progress bar is used whenever there is a need for a visual interface to show progress in a particular task. Let's say, "How much percentage of files has been downloaded or how many percent of students passed in an exam".
For this purpose, Bootstrap has a progress bar component that can be used on web pages. All the versions of Bootstrap support the progress bar component.
How to add a progress bar using Bootstrap?
- Visit the official page of Bootstrap here. On the right side, the bootstrap version can be selected suitable as per requirements. But its recommended to use latest version as it has new features embedded inside it.
- On the left side panel under Components section, Progress tab can be seen. Under progress tab the progress bar components can be seen.
- Now the template present can directly be used. This can be done by putting the template under body section of html page.
Example 1: The starter template from documentation tab of bootstrap can be used.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS and JS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 25%" aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 50%" aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 75%" aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 100%" aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
</body>
</html>
Output: The following progress bar can be seen on the webpage.
Example 2: We can display the percentage of the progress bar by writing it in between the div of the progress bar.
Syntax:
<div class="progress">
<div class="progress-bar"
role="progressbar"
style="width: 25%;"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">25%
</div>
</div>
Code:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS and JS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous">
</script>
</head>
<body>
<h2>Bootstrap Progress Bar</h2>
<div class="progress">
<div class="progress-bar"
role="progressbar"
style="width: 25%;"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">
25%
</div>
</div>
</body>
</html>
Output:
NOTE: The value for the progress can be changed in the code as per the requirement.
Appearance
We can change the appearance of the progress bar using the bootstrap background utilities classes like "bg-info" , "bg-success", "bg-warning" and many more.
Syntax:
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Here is a code example in which we have made progress bars of different colors using different background utility classes.
Code:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
</script>
</head>
<body>
<h2>Bootstrap Progress Bar</h2>
<div class="progress" style="margin: 5px;">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</body>
</html>
Output:
Bootstrap Progress Bar in different appearancesStripped Progress Bar
We can make stripped progress bar using the class "progress-bar-stripped" along with the "progress-bar" class in the component.
Syntax:
<div class="progress">
<div class="progress-bar progress-bar-stripped"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
Code:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
</script>
</head>
<body>
<h2>Bootstrap Stripped Progress Bar</h2>
<div class="progress" style="margin: 5px;">
<div class="progress-bar progress-bar-stripped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar progress-bar-stripped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar progress-bar-stripped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar progress-bar-stripped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="margin: 5px;">
<div class="progress-bar progress-bar-stripped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</body>
</html>
Output:
Bootstrap Stripped Progress BarAnimated Progress Bar
We can make animated progress bar using the class "progress-bar-animated" along with the "progress-bar" class in the component.
Syntax:
<div class="progress">
<div class="progress-bar progress-bar-stripped progress-bar-animated"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100" style="width: 75%">
</div>
</div>
Code:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS and JS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous">
</script>
</head>
<body>
<h2>Bootstrap Animated Progress Bar</h2>
<div class="progress">
<div class="progress-bar progress-bar-stripped progress-bar-animated"
role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"
style="width: 75%">
</div>
</div>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome
- Opera
- Safari
- Mozilla Firefox
- Brave Browser
Similar Reads
How to create a stacked progress bar using Bootstrap 5 ?
In this article, we will know how to create the stacked progress bar with the label on it using Bootstrap. Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A Progress bar is used to display the progress of a process on a computer. A pr
3 min read
How to create multi step progress bar using Bootstrap ?
In this article, we will create a multi-step progress bar using Bootstrap. In addition to Bootstrap, we will use jQuery for DOM manipulation. Progress bars are used to visualize the quantity of work that's been completed. The strength of the progress bar indicates the progress of the work. It is gen
4 min read
How to create animated progress bar using react-bootstrap ?
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 usingProgressBar from 'react-bootstrap/ProgressBarPredefined bootstrap classes.:Here in this article,
2 min read
How to create a web page using Bootstrap ?
Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for
6 min read
How to Create a Progress Bar using HTML?
To create the progress bar of a task by using a <progress> tag. It is used to represent the progress of a task. It is also defined as how much work is done and how much is left. It is not used to represent the disk space or relevant query. Syntax:<progress attributes...> </progress
2 min read
How to create circular progress bar using SVG ?
In this article, we will learn how to create a circular progress bar using SVG. Let us begin with the HTML part. In the SVG circle, the cx and cy attributes define the x and y coordinates of the circle. If cx and cy are not taken to the circle's center, it is set to (0,0). The r attribute defines th
3 min read
How to create a progress bar using HTML and CSS?
The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS. To make that progress bar responsive you will need JavaScript.In this article, we will learn to create progr
1 min read
How to make Progressbar using Angular UI Bootstrap ?
In this article, we will see how to make Dropdown using Angular UI bootstrap. Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing better UI which can be used easily. Syntax: <div uib-progressbar></div> Download AngularUI from the link: https://a
1 min read
How to create chart using bootstrap ?
A chart in Bootstrap is a graphical representation for data visualization, in which the data is represented by symbols. The various types of charts like bar charts, line charts, pie charts, donut charts, etc are created with the help of Bootstrap. In other words, we can say that chart is a type of d
3 min read
How to animate a Progress Bar in Bootstrap ?
The Bootstrap Progress Bar is a component of the bootstrap framework used to display the progress of a process. We can customize the bootstrap progress bar, color, shape, and animation as per the requirements. Bootstrap also provides several types of progress bars. Using Progress Bar, users can easi
2 min read