Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Type

Usage

Image

Linear

Linear progress indicators are often referred to as a Progress bar.

Determinate indicators are for operations where the duration of the process is known. The indicator increases in width from 0 to 100% of the track, in sync with the process’s progress.

Indeterminate indicators are for operations where the duration of the process is not known. The indicator is continuously animated along the track until the process is complete.

They can be applied to the entire page, large containers, and to form elements.

Circular

Circular progress indicators are often referred to as a Progress spinner.

Determinate indicators are for operations where the length of the process is known. They fill the invisible, circular track with colourcolor, as the indicator moves from 0 to 360 degrees.

Indeterminate indicators are for operations where the duration of the process is not known. They continuously animate along the invisible circular track until the process is complete.

They can be applied directly to an element, such as a button or card.

...