Progress Bar Component

Initial State

A value of 0 reflects an initial state, with zero progress.

<progress class="progress-bar" value="1" max="100">0%</progress>

Loading State

Any value between 0 and 100 reflects a loading state.

<progress class="progress-bar" value="50" max="100">50%</progress>

Completed State

A value of 100 reflects a completed state.

<progress class="progress-bar" value="100" max="100">100%</progress>

Fluid Progress Bar

To fill the entire width of the container, use the progress-bar--fluid modifier.

<progress class="progress-bar progress-bar--fluid" value="50" max="100">
  50%
</progress>

Animated Progress Bar

Use the buttons below to see an example of the progress bar value being animated.