3.3 KiB
Circular progress
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 progress indicators display progress by animating along an invisible circular track in a clockwise direction.
- Design article
- API Documentation (coming soon)
- Source code
Usage
Circular progress indicators may be determinate to show progress, or indeterminate for an unspecified amount of progress.
<md-circular-progress progress="0.75"></md-circular-progress>
<md-circular-progress indeterminate></md-circular-progress>
Four colors
Indeterminate circular 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>
Accessibility
Add an
aria-label
attribute to progress indicators to give them a descriptive name.
<md-circular-progress progress="0.5" aria-label="Page refresh progress"></md-circular-progress>
Theming
Circular progress supports Material theming and can be customized in terms of color.
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.
Example
<style>
:root {
--md-circular-progress-size: 32px;
--md-circular-progress-active-indicator-width: 20;
--md-sys-color-primary: #006A6A;
}
</style>
<md-circular-progress progress="0.5"></md-circular-progress>