material-components_material-web/docs/components/progress.md

Progress indicators

This documentation is fully rendered on the 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 (coming soon)
• 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

Token	Default value
--md-circular-progress-color	--md-sys-color-primary
--md-circular-progress-size	48px
--md-circular-progress-active-indicator-width	8.3333 (%)

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

Token	Default value
--md-linear-progress-track-color	--md-sys-color-surface-container-highest
--md-linear-progress-track-height	4px
--md-linear-progress-track-shape	0px
--md-linear-progress-active-indicator-color	--md-sys-color-primary
--md-linear-progress-active-indicator-height	4px

• 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>