The progress bar shows how far a user is in a process. In Bootstrap, there are several types of progress bars.
To create a basic progress bar −
Add a <div> with a class of .progress.
Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.
Progress bar is used to show a user how far long he/she is in a process. To create create a default progress bar, add a .progress class to a container element and and the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar.
The progress bar with label specifies the percentage of progress of a specific process.You have to remove the .sr-only class from the progress bar to show a visible percentage.
Contextual classes are used to provide "meaning through colors". The contextual classes that can be used with progress bars are:
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
Progress bars can also be striped:
Add class .active
to animate the progress bar:
Create a stacked progress bar by placing multiple bars into the same <div class="progress">
: