LoadingIndicator

MD3 Expressive loading indicator: a 48dp indicator whose active shape morphs through the seven Material shapes while spinning. Use it for short, indeterminate waits; use a progress indicator for longer processes.

Variants

uncontained (default) draws the shape alone; contained puts it on a primary-container circle so it stands out over other content.

<LoadingIndicator aria-label="Loading" />
<LoadingIndicator variant="contained" aria-label="Loading" />

Determinate

Pass value (0 to 1) to tie the shape to a gesture amount such as a pull-to-refresh drag — it morphs from a circle to the soft-burst shape as the value grows. Don't turn a loading indicator into a progress indicator for real task progress.

<LoadingIndicator value={pullProgress} variant="contained" aria-label="Refresh" />

Sizes & colors

size sets the rendered diameter in px (default 48). color and containerColor override the active shape and container fills.

<LoadingIndicator
  variant="contained"
  size={96}
  color="var(--md-sys-color-on-tertiary-container)"
  containerColor="var(--md-sys-color-tertiary-container)"
  aria-label="Loading"
/>

Reduced motion

Under prefers-reduced-motion: reduce the shape morph stops; the indicator keeps only a slow constant rotation so it still reads as busy.

Accessibility

• Renders role="progressbar". With a value it exposes aria-valuemin={0}, aria-valuemax={1} and aria-valuenow; the indeterminate form omits the value attributes.
• Give it an accessible name that describes what is loading (aria-label / aria-labelledby) — it is not enforced.
• Put aria-busy="true" on the region that is loading, not on the indicator.

Props

Prop	Type	Default	Description
color	string	—	Active shape color (overrides the token default).
containerColor	string	—	Container fill for the `contained` variant (overrides PrimaryContainer).
size	number	48	Rendered diameter in px.
value	number	—	Progress `0..1` for the determinate indicator. Omit for indeterminate.
variant	enum	uncontained	`uncontained` (shape only) or `contained` (shape on a PrimaryContainer circle).