# Progress indicators
**This documentation is fully rendered on the
[Material Web catalog](https://material-web.dev/components/progress/).**
[Progress indicators](https://m3.material.io/components/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.
* [Design article](https://m3.material.io/components/progress-indicators)
* [API Documentation](#api)
* [Source code](https://github.com/material-components/material-web/tree/main/progress)
## Types
1. [Circular progress](#circular-progress)
1. [Linear progress](#linear-progress)
## Usage
Progress indicators may be determinate to show progress, or indeterminate for an
unspecified amount of progress.
```html
```
### Four colors
Indeterminate progress indicators may cycle between four colors (primary,
primary container, tertiary, and tertiary container by default).
```html
```
## Accessibility
Add an
[`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
attribute to progress indicators to give them a descriptive name.
```html
```
## Circular progress
Circular progress indicators display progress by animating along an invisible
circular track in a clockwise direction.
```html
```
## Linear progress
Linear progress indicators display progress by animating along the length of a
fixed, visible track.
```html
```
### 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
```
## Theming
Progress indicators supports [Material theming](../theming/README.md) and can be
customized in terms of color.
### Circular progress tokens
Token | Default value
----------------------------------------------- | ------------------------
`--md-circular-progress-active-indicator-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.
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-circular-progress.scss)
### Circular progress example
```html
```
### 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`
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-linear-progress.scss)
### Linear progress example
```html
```
## 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. |