SpinnerA visual indicator of a loading or processing state.

Install the component from your command line.

npm install @raystack/apsara

Import and usage.

import { Spinner } from '@raystack/apsara/v1'

<Spinner size={3} />

Props

The Spinner component accepts the following props:

size: Size of the spinner (1 | 2 | 3 | 4 | 5 | 6, default: 1)
color: Color variant of the spinner ("default" | "inverted", default: "default")
className: Additional CSS class names
All other HTMLDivElement attributes from React

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:

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.

Other props

The Spinner component also supports custom className prop.

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.