Progress indicators

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.

Circular and linear progress indicators showing indetermine and determinate examples

  1. Circular progress
  2. Linear progress

View interactive demo inline.

Open interactive demo in new tab.

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>

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>

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

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>

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

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

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

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

MdLinearProgress <md-linear-progress>

Link to “MdLinearProgress <md-linear-progress>”
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>

Link to “MdCircularProgress <md-circular-progress>”
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.
About
IntroductionQuick StartRoadmapSupportBundle Sizes
Theming
Material ThemingColorTypographyShape
Components
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenusProgress indicatorsRadioRippleSelectSlidersSwitchTabsText field