Material Web catalog.**

Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form.

There are two types of progress indicators: linear and circular.

• Design article

• API Documentation

• Source code

Types ​

1. Circular progress
2. Linear progress

Usage ​

Progress indicators may be determinate to show progress, or indeterminate for an unspecified amount of progress.

<md-circular-progress value="0.75"></md-circular-progress>
<md-circular-progress indeterminate></md-circular-progress>

<md-linear-progress indeterminate></md-linear-progress>
<md-linear-progress value="0.5"></md-linear-progress>

Four colors ​

Indeterminate progress indicators may cycle between four colors (primary, primary container, tertiary, and tertiary container by default).

<md-circular-progress four-color indeterminate></md-circular-progress>
<md-linear-progress four-color indeterminate></md-linear-progress>

Accessibility ​

Add an aria-label attribute to progress indicators to give them a descriptive name.

<md-circular-progress value="0.5" aria-label="Page refresh progress"></md-circular-progress>

<md-linear-progress value="0.5" aria-label="Download progress"></md-linear-progress>

Circular progress ​

Circular progress indicators display progress by animating along an invisible circular track in a clockwise direction.

<md-circular-progress indeterminate></md-circular-progress>
<md-circular-progress value="0.6"></md-circular-progress>

Linear progress ​

Linear progress indicators display progress by animating along the length of a fixed, visible track.

<md-linear-progress indeterminate></md-linear-progress>
<md-linear-progress value="0.6"></md-linear-progress>

Buffer ​

Linear progress indicators may show a buffer to communicate both determinate and indeterminate progress. The progress bar and track represent known progress while the buffer dots represent unknown progress.

<md-linear-progress value="0.5" buffer="0.8"></md-linear-progress>

Theming ​

Progress indicators supports Material theming and can be customized in terms of color.

Circular progress tokens ​

Note: the active indicator width must be specified as a unit-less percentage of the size.

• All tokens

Circular progress example ​

<style>
:root {
  --md-circular-progress-size: 32px;
  --md-circular-progress-active-indicator-width: 20;
  --md-sys-color-primary: #006A6A;
}
</style>

<md-circular-progress value="0.5"></md-circular-progress>

Linear progress tokens ​

• All tokens

Linear progress example ​

<style>
:root {
  --md-linear-progress-track-height: 8px;
  --md-linear-progress-track-shape: 8px;
  --md-linear-progress-active-indicator-height: 8px;
  --md-sys-color-primary: #006A6A;
  --md-sys-color-surface-container-highest: #DDE4E3;
}
</style>

<md-linear-progress value="0.5"></md-linear-progress>

API ​

MdLinearProgress <md-linear-progress> ​

Properties ​

MdCircularProgress <md-circular-progress> ​

Properties ​