Spinner

Anatomy

Import and assemble the component:

1import { Spinner } from "@raystack/apsara";
2
3<Spinner />

Usage

How big the spinner is, and what color it turns.

Size

Six steps, 1 through 6. Pick the one that matches the text or control it sits beside.

The Spinner component offers different size options. You can customize the size of the spinner using the size prop. The available size options are:

1<Flex gap={5} align="center">
2  <Spinner size={1} />
3  <Spinner size={2} />
4  <Spinner size={3} />
5  <Spinner size={4} />
6  <Spinner size={5} />
7  <Spinner size={6} />
8</Flex>

Color

neutral is the default. inherit uses currentColor, so the spinner takes the color of the text around it, for example inside a Button. The other four carry meaning: accent, danger, success, attention.

1<Flex gap={9} align="center">
2  <Spinner size={4} color="inherit" />
3  <Spinner size={4} color="neutral" />
4  <Spinner size={4} color="accent" />
5  <Spinner size={4} color="danger" />
6  <Spinner size={4} color="success" />
7  <Spinner size={4} color="attention" />
8</Flex>

API Reference

Renders a loading spinner animation.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Accessibility

The Spinner component includes appropriate ARIA attributes for accessibility:

• role="status" and aria-live="polite": assistive tech announces the spinner as a polite live region when it appears.
• aria-label: announced label, defaults to "Loading". Pass aria-label="…" to override with context-specific text like "Saving changes".
• Pass aria-hidden="true" for purely decorative spinners (e.g. inside a button that already has aria-busy). The status role and label are removed automatically so the two attributes don't conflict.
• Respects motion preferences: spinner rotation is enabled only when prefers-reduced-motion: no-preference.