material-components_material-web/docs/components/linear-progress.md

Linear progress

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.

Linear progress indicators display progress by animating along the length of a fixed, visible track.

• Design article
• API Documentation (coming soon)
• Source code

Usage

Linear progress indicators may be determinate to show progress, or indeterminate for an unspecified amount of progress.

<md-linear-progress value="0.5"></md-linear-progress>

<md-linear-progress indeterminate></md-linear-progress>

Four colors

Indeterminate linear progress indicators may cycle between four colors (primary, primary container, tertiary, and tertiary container by default).

<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-linear-progress value="0.5" aria-label="Download progress"></md-linear-progress>

Theming

Linear progress supports Material theming and can be customized in terms of color and shape.

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

• All tokens

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>