Skip to content
Design System

Progress

Progress bars provide users with feedback regarding the duration and progression of a process. Depending on the type used, they can indicate how long a user will be waiting or simply that the system is processing something.

Code

Variants

<div class="progress">
  <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:25%">
    <span class="sr-only">25% Complete</span>
  </div>
</div>

In Practice

  • Use a determinate progress bar to indicate the status of an ongoing process whenever the completion percentage is known.
  • When a specific completion amount is not known, the indeterminate progress bar can be used.
  • For very short process times, use the spinner component.
  • When indicating a full page load, use the skeleton loader.

Accessibility

  • Always provide an accessible label for progress bars.
  • A comprehensive progress bar must have these attributes:
    • role="progressbar" for progress bar element to define it is the progress bar.
    • aria-valuenow="0" it is the same as <progress value="0"> that should be added to the progress bar.
    • aria-valuemin="0" & aria-valuemax="100" like <progress min="0" max="100">
  • For more information, see our accessibility guidelines.

Design resources

View component in Figma