AiLoadingIndicator

Use the AiLoadingIndicator component to indicate that AI-generated content is being loaded.

OverviewPropertiesAccessibilityChangelog

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Interactive elements and ARIA

AiLoadingIndicator communicates status via a polite live region without moving focus.

It includes role="progressbar" to indicate an indeterminate loading state for assistive technologies. The icon is marked as decorative with aria-hidden="true".

For optimal accessibility, wrap the component in a container with role="status" and aria-live="polite" to announce loading state changes to screen readers:

<div role="status" aria-live="polite">
  {isLoading && <AiLoadingIndicator>Thinking…</AiLoadingIndicator>}
</div>

Motion and animation

The label animates with a moving gradient to signal that content is still loading.

AiLoadingIndicator respects the user's motion preference out of the box. When prefers-reduced-motion is set to reduce, the animation doesn't play and the label renders as static text. You don't need to configure anything.

• Do write a label that describes the loading state on its own, because the animation carries no meaning for users who turn off motion.
• Don't reintroduce the animation through a custom className or style. That overrides the motion preference the component honors.