Spinner

Usage

The Spinner component provides a way to show a spinner.

import { Spinner } from "@raystack/apsara/v1";
 
<Spinner size={3} />;

Spinner Props

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:

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

Color

The Spinner component offers two color options. This is mainly helpful if we want to render the Spinner inside another component with lighter or darker background color. Spinner uses a color prop.

<Flex gap="large" align="center">
  <Spinner size={4} />
  <Flex style={{ backgroundColor: "black", padding: "20px" }}>
    <Spinner size={4} color="inverted" />
  </Flex>
</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.