Skip to main content

Progress

A progress indicator provides feedback to a user regarding loading and waiting states.

Code documentation

Web

Anatomy

The progress component is made up of four elements.

  1. Label
  2. Value
  3. Track
  4. Indicator
Anatomy diagram numbering four elements of a progress indicator.

Variants

Type

Two progress indicators are compared side-by-side. The left example is a gray pill-shaped bar. A blue bar fills about one-third of the gray one starting from the left. The right example is a gray circular outline. A blue outline starts at the top of the circle and fills about one-third of the way around the circle.

Linear

Linear progress indicators are the default and best used when multiple progress indicators are present such as a queue of file uploads. The can also be used when vertical space is limited

Circular

Circular progress indicators work well in situations where there there is only one progress being displayed in a given context, such as a card’s loading state. They also tend to work better than linear progress indicators when horizontal space is limited.

Size

Three sets of progress indicators compare sizes from top-to-bottom: small, medium, and large.

Small

Small progress indicators should be used to show progress inline with another component or within confined spaces such as card headers.

Medium

The medium progress indicator is the default and used when there is ample space available.

Large

Large progress indicators indicate loading within main sections of the interface such as cards and dialogs.

Label

Labels provide context about the loading process being performed. While labels do not have to be visually displayed, each progress indicator must have a label defined in the code for accessibility purposes.

A linear progress indicator and a circular indicator are compared side-by-side. The linear indicator includes sample label text left-aligned just above the bar. The circular indicator includes sample label text horizontally-centered with and just below the circle.

Value

Values provide information about the progress such as percent complete or amount of data loaded. Indeterminate progress indicators do not display a value.

The value can be displayed with or without the label.

A linear progress indicator and circular indicator are compared side-by-side. Both examples include a value that numerically represents the amount of gray track filled with blue. The value of the linear indicator is right-aligned to the track and inline with the label text. The value of the circular indicator is horizontally-centered with and just below the circle and label text.

Indeterminate

Indeterminate progress indicators should be used when the progress cannot be calculated such as syncing processes or reconnecting to a server.

Linear and circular progress indicators are compared side-by-side. Both indicators are filled with an indeterminate length of blue. The blue fill within the linear indicator is offset from the left edge of the track and extends just beyond the halfway point. The blue fill of the circular indicator begins near the bottom of the circle and fills clockwise to about the two-o-clock position.