BS5 Progress Bars
Bootstrap 5 Progress Bars
A user can see how far along they are in a process by using a progress bar.
To build a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. To adjust the progress bar’s width, use the CSS width property:
Example
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Progress Bar Height
By default, the progress bar’s height is 1rem, or 16px. To adjust it, use the CSS height property:
Example
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Progress Bar Labels
To display the visible percentage, add text inside the progress bar as follows:
Example
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Colored Progress Bars
The progress bar is blue (primary) by default. To alter its color, apply any of the Bootstrap 4 contextual background classes:
Example
<!-- Blue -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grey -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Light Grey -->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Striped Progress Bars
To give the progress bars stripes, use the .progress-bar-striped class:
Example
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Animated Progress Bar
==== Animated Progress Bar ====
To make the progress bar animate, add the .progress-bar-animated class:
Example
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
Multiple Progress Bars
Another way to stack progress bars is to:
Example
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
