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 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 predefined bootstrap classes. Bootstrap provides many types of progress bars. Progress components are built with two HTML elements which uses CSS to set the width and a few attributes. It doesn’t use the HTML5 <progress> element which makes it possible to stack progress bars, animate them, and place text labels over them. It uses the .progress as a wrapper to indicate the max value of the progress bar and the inner .progress-bar to indicate the progress so far.
Syntax:
<div class="progress"> Contents... <div>
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< div class = "progress" >
< div class = "progress-bar"
style = "width: 80%;" >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Height of Progress Bar: We can use CSS property to change the height of progress bar. The default height of progress is 16px. The height of progress and progress-bar container must be the same.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< div class = "progress" style = "height: 30px;" >
< div class = "progress-bar"
style = "width: 80%; height: 30px;" >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Labeled Progress Bar: The labeled progress bar is used to display the text inside the progress bar to show the task completion percentage.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< div class = "progress" >
< div class = "progress-bar" style = "width: 75%;" >
75%
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Colored Progress Bars: Use Bootstrap 4 contextual background classes to set the color of progress bar. The default color of the progress bar is blue.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3"
style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< div class = "progress" >
< div class = "progress-bar"
style = "width: 50%;" >
50%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-success"
style = "width: 60%;" >
60%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-warning"
style = "width: 80%;" >
80%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-danger"
style = "width: 90%;" >
90%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-info"
style = "width: 100%;" >
100%
</ div >
</ div >
< br />
</ div >
</ body >
</ html >
|
Output:
Striped Progress Bars: The .progress-bar-striped class is used to add stripes to the progress bars. Use the combination of .progress-bar and .progress-bar-striped classes to create striped progress bar. Use Bootstrap 4 contextual background classes to set the color of progress bar.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< div class = "progress" >
< div class = "progress-bar progress-bar-striped"
style = "width: 60%;" >
60%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-success progress-bar-striped"
style = "width: 70%;" >
70%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-warning progress-bar-striped"
style = "width: 80%;" >
80%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-danger progress-bar-striped"
style = "width: 90%;" >
90%
</ div >
</ div >
< br />
< div class = "progress" >
< div class = "progress-bar bg-info progress-bar-striped"
style = "width: 100%;" >
100%
</ div >
</ div >
< br />
</ div >
</ body >
</ html >
|
Output:
Animated Progress Bar: The .progress-bar-animated class is used to create an animated progress bar. Use the combination of .progress-bar, .progress-bar-striped and .progress-bar-animated to create an animated progress bar.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< div class = "progress" >
< div class="progress-bar
progress-bar-striped
progress-bar-animated"
style = "width: 60%;" >
60%
</ div >
</ div >
< br />
< div class = "progress" >
< div class="progress-bar bg-success
progress-bar-striped
progress-bar-animated"
style = "width: 70%;" >
70%
</ div >
</ div >
< br />
< div class = "progress" >
< div class="progress-bar bg-warning
progress-bar-striped
progress-bar-animated"
style = "width: 80%;" >
80%
</ div >
</ div >
< br />
< div class = "progress" >
< div class="progress-bar bg-danger
progress-bar-striped
progress-bar-animated"
style = "width: 90%;" >
90%
</ div >
</ div >
< br />
< div class = "progress" >
< div class="progress-bar
bg-info progress-bar-striped
progress-bar-animated"
style = "width: 100%;" >
100%
</ div >
</ div >
< br />
</ div >
</ body >
</ html >
|
Output:
Multiple Progress Bars: Multiple progress bars can be stacked to display different colored progress bars.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3"
style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< div class = "progress" >
< div class = "progress-bar"
style = "width: 50%;" >
50%
</ div >
< div class = "progress-bar bg-success"
style = "width: 25%;" >
25%
</ div >
< div class = "progress-bar bg-warning"
style = "width: 10%;" >
10%
</ div >
< div class = "progress-bar bg-danger"
style = "width: 5%;" >
5%
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
08 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...