Loading indicator
A loading indicator shows that a short process is running, with a shape that morphs through Material shapes while it turns.
<md-gb-loading-indicator aria-label="Loading"></md-gb-loading-indicator>Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-loading-indicator.json (setup)
Usage guidelines
Link to “Usage guidelines”- Use it for short waits. A loading indicator suits processes that finish in under five seconds, and replaces most uses of an indeterminate circular progress indicator.
- Reflect real work. It always represents an ongoing process and is never only decorative.
- Don't switch to determinate. Avoid it for processes that start indeterminate and later report progress; use a progress indicator there.
- Use it for refreshing. A pull to refresh container shows a contained loading indicator.
This component is new in M3 Expressive.
Anatomy
Link to “Anatomy”A loading indicator is one element: a shape, with an optional container behind it.
<md-gb-loading-indicator aria-label="Loading"></md-gb-loading-indicator>Examples
Link to “Examples”Contained
Link to “Contained”Add contained to put the shape on a container, which helps it stand out over content.
<md-gb-loading-indicator contained aria-label="Loading"></md-gb-loading-indicator>Determinate
Link to “Determinate”Set value from 0 to 1 to show progress. Without it, the indicator is indeterminate.
<md-gb-loading-indicator value="0.4" aria-label="Downloading"></md-gb-loading-indicator>Accessibility
Link to “Accessibility”- The indicator is a
progressbar, so give it anaria-labelthat says what is loading. - A determinate indicator exposes its value to assistive technology.
- With reduced motion, the shape stops morphing and only turns slowly.
Compatibility
Link to “Compatibility”Material Design 3Spec checked78% tokens
41 of 102 buildable spec units are tested, 6 are excluded with a written reason and 0 are uncovered (the target is 0). 7 of 9 token declarations match the spec (78%), and 2 have no spec token.
loading-indicator 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):
- SVG (opens in a new tab) Widely available degrades safely where it is missing
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.
API reference
Link to “API reference”<md-gb-loading-indicator>
Link to “<md-gb-loading-indicator>”A Material Design component.
Properties
Link to “Properties”| Property | Attribute | Type | Default |
|---|---|---|---|
containedWhether the indicator has a container. |
contained |
boolean |
false |
valueProgress from 0 to 1. When set, the indicator is determinate; when unset (the default), it is indeterminate. |
value |
number |
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-size |
|
--container-color |
|
--container-height |
|
--container-shape |
|
--container-width |
|
--progress |
|
--size |
The container size, clamped to 24dp-240dp (48dp default). |