toc

Progress indicators

Progress indicators inform people about the status of ongoing processes, such as loading an app or submitting a form.

<md-gb-progress value="0.5" aria-label="Upload progress"></md-gb-progress>
<md-gb-progress circular aria-label="Loading"></md-gb-progress>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-progress.json (setup)

Usage guidelines

Link to “Usage guidelines”

Pick the variant. Use linear for progress across a page or container and circular for a compact spot such as a button or a card.
Use the same style for the same process. Keep one configuration for all the instances of a process, like loading.
Show real progress when you know it. Set a value for determinate progress, and leave it off when the length of the process is unknown.
Use wavy sparingly. A wavy active indicator is more expressive; use it where that fits your product.
For short waits, use a loading indicator. The loading indicator replaces most indeterminate circular progress indicators.

Anatomy

Link to “Anatomy”

A progress indicator is one element: an active indicator over a track. It is linear unless circular is set.

<md-gb-progress aria-label="Loading"></md-gb-progress>

Examples

Link to “Examples”

Linear

Link to “Linear”

The default indicator animates along a horizontal track.

<md-gb-progress aria-label="Loading"></md-gb-progress>
<md-gb-progress value="0.6" aria-label="Download progress"></md-gb-progress>

Circular

Link to “Circular”

Add circular to animate clockwise along a circular track.

<md-gb-progress circular aria-label="Loading"></md-gb-progress>
<md-gb-progress circular value="0.6" aria-label="Download progress"></md-gb-progress>

Determinate

Link to “Determinate”

Set value from 0 to 1 when you know how far along the process is. Without a value, the indicator is indeterminate.

<md-gb-progress value="0.25" aria-label="Step 1 of 4"></md-gb-progress>
<md-gb-progress value="0.5" aria-label="Step 2 of 4"></md-gb-progress>
<md-gb-progress value="0.75" aria-label="Step 3 of 4"></md-gb-progress>

Wavy

Link to “Wavy”

Add wavy to give the active indicator a wave. It works on linear and circular indicators, determinate or not.

<md-gb-progress wavy value="0.5" aria-label="Upload progress"></md-gb-progress>
<md-gb-progress circular wavy aria-label="Loading"></md-gb-progress>

Accessibility

Link to “Accessibility”

A progress indicator is a progressbar. Give it an aria-label that says what is in progress, such as "Download progress".
A determinate indicator exposes its value from 0 to 100 to assistive technology. An indeterminate one has no value.

<md-gb-progress value="0.5" aria-label="Download progress"></md-gb-progress>

Compatibility

Link to “Compatibility”

Material Design 3Spec checked94% tokens

61 of 164 buildable spec units are tested, 3 are excluded with a written reason and 0 are uncovered (the target is 0). 17 of 18 token declarations match the spec (94%), and 1 have no spec token.

progress-indicators on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

Container style queries (opens in a new tab) Newly available degrades safely where it is missing
Forced colors (opens in a new tab) Widely available degrades safely where it is missing
Registered custom properties (opens in a new tab) Newly available degrades safely where it is missing
SVG (opens in a new tab) Widely available degrades safely where it is missing
CSS.registerProperty() (opens in a new tab) Newly available JavaScript, feature-detected or optional

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 pass

Roles the component renders: progressbar (opens in a new tab).

1 rendered state run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse98 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Eliminate render-blocking resources
Minify JavaScript
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-progress>

Link to “<md-gb-progress>”

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`circular` Whether the indicator is circular instead of linear.	`circular`	`boolean`	`false`
`value` Progress from 0 to 1. When set, the indicator is determinate; when unset (the default), it is indeterminate.	`value`	`number`
`wavy` Whether the active indicator is wavy instead of flat (the default).	`wavy`	`boolean`	`false`

CSS parts

Link to “CSS parts”

Part	Description
`::part(indicator)`	The indicator container.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--active-indicator-color`
`--active-indicator-thickness`
`--height`	Linear only.
`--progress`
`--size`	Circular only.
`--stop-indicator-color`
`--stop-indicator-shape`
`--stop-indicator-size`
`--stop-indicator-trailing-space`
`--track-active-indicator-space`
`--track-color`
`--track-shape`
`--track-thickness`