Progress Bar

Progress bars are used to convey the duration of system processes, including installation and uploading or downloading files, images, or updates.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Progress bar was previously named “Standard Progress Indicator with Percentage” and was featured in the “Progress Indicators" section of DDS v1. This component has been redesigned to the updated font ramp and color palette, in addition to accessibility enhancements. There are two kinds of progress bar, determinate and indeterminate, with the prior showing percent completion. Each kind has a distinct animation and usage guidelines.

When to use

ComponentUse case
Progress barProgress indicator provides visual or quantitative feedback to users regarding how long a system will take to complete a system process. This component is not intended for use during loading or submission events under five seconds.
Progress trackerProgress trackers display the user’s location within a multistep process while providing the status of each step. In these cases, progress is user-initiated.
Loading indicatorA loading indicator is a visual animation used to convey processing or loading, but does not indicate how long the activity will take to complete.

Anatomy

A progress bar is composed of, at most, five elements:

  1. Label (optional): concise description of the process that the progress bar refers to. The label can be visually hidden, but must be defined for accessibility.
  2. Helper text (optional): assistive or contextual information about the process taking place. Unavailable when using start placement.
  3. Bar: used to how how much the process has progressed for the determinate kind. Indeterminate bars are a fixed size and loop continuously.
  4. Track: the area that the bar fills or moves across.
  5. Value: a determinate progress bar will show a percentage, fraction, or number to indicate progress.

Articles

Progress indicators article

Read the Nielsen Norman Group's article on progress bar.

Designing for long waits and interruptions

Read the Nielsen Norman Group's article on progress bar.