The .progress-bar component is used to display the completion progress of a task, or to show that something is happening now. Progress is built on top of the <progress> HTML component.
Here is an example of a standard usage of the progress bar component. The progress shown is set with the value attribute.
HTML
<progress class="progress-bar" value="90" max="100"></progress>progress-sm makes progress bar a little smaller than the default.
HTML
<progress class="progress-bar progress-bar-sm" value="90" max="100"></progress>Progress additionally has three color variants: warning, danger, and success.
| State | Class | Example |
|---|---|---|
| Danger | .progress-bar.progress-bar-danger | |
| Warning | .progress-bar.progress-bar-warning | |
| Success | .progress-bar.progress-bar-success |
When the amount of progress made is unclear, or when it's more important to display that an action is underway, removing the value attribute will yield an indeterminate progress bar.
HTML
<progress class="progress-bar" max="100"></progress>