Loading indicator

The loading indicator is the Material 3 expressive take on a spinner. Instead of sweeping an arc around a circle, it morphs through a sequence of shapes while it turns. Use it for short waits inside a surface you already own, such as a pull to refresh gesture or a panel that is fetching its contents. For anything that reports real progress over a longer period, reach for progress indicators instead.

Indeterminate

Pass indeterminate when you cannot say how long the wait will be. The indicator loops through seven shapes, a new morph every 650ms, and completes a full turn every 4.7 seconds.

<LoadingIndicator
	indeterminate
	aria-label="Loading"
/>

Determinate

With a value the indicator morphs from a circle into a soft burst as it fills up, turning half a rotation counterclockwise along the way. value is a fraction between 0 and max, which defaults to 1.

<LoadingIndicator value={0.6} aria-label="Download progress" />

Contained

contained puts the shape on a filled circle. Use it when the indicator floats over content, where the container keeps it legible, and leave it off when the indicator sits on a surface of its own.

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

Accessibility

The indicator renders role="progressbar" and keeps aria-valuenow and aria-valuemax in sync with value and max. It has no text of its own, so always pass an aria-label saying what is loading. An indeterminate indicator leaves out aria-valuenow, and that omission is what tells assistive technology that the duration is unknown.

<LoadingIndicator
	indeterminate
	aria-label="Loading search results"
/>

Theming

The shape is drawn relative to the container, so it scales with --np-loading-indicator-size without any further adjustment.

<LoadingIndicator
	--np-loading-indicator-color="var(--np-color-on-error-container)"
	--np-loading-indicator-container-color="var(--np-color-error-container)"
	--np-loading-indicator-size="5rem"
	contained
	indeterminate
/>

API