Skip to content
On this page

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.

Types

  1. Circular progress
  2. Linear progress

Usage

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

html
<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).

html
<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.

html
<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.

html
<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.

html
<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.

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

TokenDefault value
--md-circular-progress-color--md-sys-color-primary
--md-circular-progress-size48px
--md-circular-progress-active-indicator-width8.3333 (%)

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

Circular progress example

Image of a circular progress indicator with a different theme applied

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

TokenDefault value
--md-linear-progress-track-color--md-sys-color-surface-container-highest
--md-linear-progress-track-height4px
--md-linear-progress-track-shape--md-sys-shape-corner-none
--md-linear-progress-active-indicator-color--md-sys-color-primary
--md-linear-progress-active-indicator-height4px

Linear progress example

Image of a linear progress indicator with a different theme applied

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

PropertyAttributeTypeDefaultDescription
bufferbuffernumber0Buffer amount to display, a fraction between 0 and max. If the value is 0 or negative, the buffer is not displayed.
valuevaluenumber0Progress to display, a fraction between 0 and max.
maxmaxnumber1Maximum progress to display, defaults to 1.
indeterminateindeterminatebooleanfalseWhether or not to display indeterminate progress, which gives no indication to how long an activity will take.
fourColorfour-colorbooleanfalseWhether or not to render indeterminate mode using 4 colors instead of one.

MdCircularProgress <md-circular-progress>

Properties

PropertyAttributeTypeDefaultDescription
valuevaluenumber0Progress to display, a fraction between 0 and max.
maxmaxnumber1Maximum progress to display, defaults to 1.
indeterminateindeterminatebooleanfalseWhether or not to display indeterminate progress, which gives no indication to how long an activity will take.
fourColorfour-colorbooleanfalseWhether or not to render indeterminate mode using 4 colors instead of one.
has loaded