mirror of https://github.com/material-components/material-web.git synced 2026-03-09 00:09:23 +08:00

Elizabeth Mitchell babf265644 docs: add linear progress docs

PiperOrigin-RevId: 528879936

2023-05-02 13:53:18 -07:00

3.3 KiB

Raw Blame History

Linear 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.

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 progress="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 progress="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 progress="0.5"></md-linear-progress>

3.3 KiB Raw Blame History