Appearance
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
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
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
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
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 | --md-sys-shape-corner-none |
--md-linear-progress-active-indicator-color | --md-sys-color-primary |
--md-linear-progress-active-indicator-height | 4px |
Linear progress example
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
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
buffer | buffer | number | 0 | Buffer amount to display, a fraction between 0 and max . If the value is 0 or negative, the buffer is not displayed. |
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. |