Bootstrap 4 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.
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.
Note that not all browsers support this feature at the time of writing.