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.
Types
Link to “Types”Interactive Demo
Link to “Interactive Demo”View interactive demo inline.
Open interactive demo in new tab.
Usage
Link to “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
Link to “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
Link to “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
Link to “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
Link to “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
Link to “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
Link to “Theming”Progress indicators supports Material theming and can be customized in terms of color.
Circular progress tokens
Link to “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 (%) |
bookmark the active indicator width must be specified as a unit-less percentage of the size.
Circular progress example
Link to “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
Link to “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
Link to “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>MdLinearProgress <md-linear-progress>
Link to “MdLinearProgress <md-linear-progress>” Properties
Link to “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>
Link to “MdCircularProgress <md-circular-progress>” Properties
Link to “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. |