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>

API

MdLinearProgress

Properties

Property	Attribute	Type	Default	Description
buffer	buffer	number	1	Buffer amount to display, a fraction between 0 and 1.
value	value	number	0	Progress to display, a fraction between 0 and max.
max	max	number	1	Maximum progress to display, defaults to 1.
indeterminate	indeterminate	boolean	false	Whether or not to display indeterminate progress, which gives no indication to how long an activity will take.
fourColor	four-color	boolean	false	Whether or not to render indeterminate mode using 4 colors instead of one.

MdCircularProgress

Properties

Property	Attribute	Type	Default	Description
value	value	number	0	Progress to display, a fraction between 0 and max.
max	max	number	1	Maximum progress to display, defaults to 1.
indeterminate	indeterminate	boolean	false	Whether or not to display indeterminate progress, which gives no indication to how long an activity will take.
fourColor	four-color	boolean	false	Whether or not to render indeterminate mode using 4 colors instead of one.