Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/progress-bar

DS v3.1

The progress bar gives an immediate, real-time visualisation of the current task completion status.

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

Any value between 0 and 100 reflects a loading state.

50%

A value of 100 reflects a completed state.

100%

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

50%

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

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

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

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

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