Skip to content

Latest commit

 

History

History
414 lines (301 loc) · 11.7 KB

progress.md

File metadata and controls

414 lines (301 loc) · 11.7 KB
Raw

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.

Circular and linear progress indicators showing indetermine and determinate examples

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.

Circular progress example

Image of a circular progress indicator with a different theme applied

<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

Linear progress example

Image of a linear progress indicator with a different theme applied

<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

Property Attribute Type Default Description
buffer buffer number 1 Buffer amount to display, a fraction between 0 and max.
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 <md-circular-progress>

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.