Loader

Usage

Loader is the inline activity indicator for pending assistant work: the design system's one spinning glyph in a polite status region, with optional text beside it. Use it where a reply, a tool call, or an upload is under way and its length is unknown.

Dot-matrix patterns

Set pattern to play a dot-matrix animation in place of the spinner glyph, for a pending state that should carry more character than the spinner. size (12, 16, 20 or 24) sets the grid. The patterns are pulse, orbit, spiral, wave, scan, rain, sparkle and bloom. Naming rules are unchanged: visible label text, or a required aria-label.

When to use

The pending state of an assistant reply, shown as the content of a Message until text streams in.
A short inline wait next to the control or line that caused it.

When not to use

Work with a known length or a value to report: use Progress, which is a progressbar.
A placeholder for content that will fill a layout: use Skeleton, or LoadingBoundary around the region.
A pending button: use Button's loading, which already composes the same glyph.
A bare indicator with no text beside it, such as a region that is loading: use LoadingIndicator, which is a named status of its own. Loader keeps Icon's glyph rather than LoadingIndicator's dots.
Text that should itself read as in progress: use Shimmer.

Composition

The spinner is Icon's loader glyph with spin, the one spin animation of the design system. Loader draws no spinner of its own.
The root is a span with role="status", a polite status region. It is not an output, so a form reset leaves it alone.
The text is Text at body medium and the subtle tier. The glyph is the subtle icon color.
With visible text the text is the status. Without it, aria-label names the status and is required.
className is appended after the generated classes. There is no style.

Reduced motion

Under the system setting or the app's reduce-motion preference the glyph holds still and stays visible, so the pending state does not rely on movement. A dot-matrix pattern drops its sweep and breathes slowly and uniformly instead.

Line Chart / Accessibility

Loader / API and Development

On this page

Loader

Usage

Dot-matrix patterns

When to use

The pending state of an assistant reply, shown as the content of a Message until text streams in.
A short inline wait next to the control or line that caused it.

When not to use

Work with a known length or a value to report: use Progress, which is a progressbar.
A placeholder for content that will fill a layout: use Skeleton, or LoadingBoundary around the region.
A pending button: use Button's loading, which already composes the same glyph.
A bare indicator with no text beside it, such as a region that is loading: use LoadingIndicator, which is a named status of its own. Loader keeps Icon's glyph rather than LoadingIndicator's dots.
Text that should itself read as in progress: use Shimmer.

Composition

The spinner is Icon's loader glyph with spin, the one spin animation of the design system. Loader draws no spinner of its own.
The root is a span with role="status", a polite status region. It is not an output, so a form reset leaves it alone.
The text is Text at body medium and the subtle tier. The glyph is the subtle icon color.
With visible text the text is the status. Without it, aria-label names the status and is required.
className is appended after the generated classes. There is no style.

Reduced motion

Line Chart / Accessibility

Loader / API and Development

On this page