Bootstrap 3 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.
Default Progress Bar
To create a default progress bar, use the .progress
class with a .progress-bar
nested inside it.
With Label
You can include a label that displays a percentage value on the progress bar (to explicitly state, in percentage terms, the completeness of the task).
To display a label on the progress bar, insert text as contents of the <div>
element that has the .progress-bar
class applied.
Also, remove the <span>
with .sr-only
to prevent screen readers from reading out the percentage twice.
Minimum-Width
When using a label to display the percentage, it's a good idea to specify a min-width
on the .progress-bar
element. Without this, the label will be difficult to read when the value is very small.
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 .active
class to the .progress-bar
element.
Stacked Progress Bars
By placing multiple .progress-bar
elements inside a .progress
element, they will become stacked — they'll appear alongside each other within the same bar.