Anatomy

Import and assemble the component:

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

API Reference

Renders a loading spinner animation.

Examples

Size

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="medium" 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

The Spinner component offers 6 color values. default prop sets the color to currentColor mainly helpful if we want to render the Spinner inside another component like Button. Spinner (with color="default") inherits the foreground color of button text.

1<Flex gap="large" align="center">
2  <Spinner size={4} color="default" />
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>

Accessibility

The Spinner component includes appropriate ARIA attributes for accessibility:

• role="status": Indicates that the element is a status indicator.
• aria-hidden="true": Hides the spinner from screen readers, as it's a visual indicator only.