Bootstrap 5 Progress Bars
Provide graphical feedback on the progress of a process with Bootstrap's progress bars.
Bootstrap provides a component for displaying progress bars on a website. Progress bars are typically used to provide feedback to the user on the progress of a given process or action. Users can visualize instantly how much is complete and how much more there is to go.
Bootstrap doesn't use the HTML progress
element for progress bars, to ensure you can stack progress bars, animate them, and place text labels over them.
Default Progress Bar
To create a default progress bar, use the .progress
class with a .progress-bar
nested inside it.
Contextual Classes
You can use the contextual classes to provide extra semantics via color.
Stripes
You can add stripes by adding the .progress-bar-striped
class to the .progress-bar
element.
Animated Stripes
You can animate the stripes by adding the .progress-animated
class to the .progress
element.