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.
You can use the contextual classes to provide extra semantics via color.
You can add stripes by adding the
.progress-bar-striped class to the
You can animate the stripes by adding the
.progress-animated class to the