Progress bars

A visual indicator of progress. One bar filled by another, to a percentage of the full width.

Design
HTML

CSS Classes:

1. .progress

  • The container class for the progress bar. Defaults to 100% width.

2. .progress-meter

  • The progress indicator contained within .progress.
  • Width is adjusted through inline styling to this element.

3. --success and --error

  • Modifier classes for progress status visual style. Success for green, Error for red.

 JS

Accessibility

In most cases your progress bar should either be static (showing a certain level of progress), or dynamic (animated to indicate ongoing progress). At any state, a progress bar should politely announce its status as an aria-live="polite" region.

  • If your progress bar is static, it should politely announce the current progress.
  • If it is dynamic, it should politely announce "in progress".
  • On completion, it should announce politely that it is "complete".