Skip to content

index.mdx

Latest commit

 

History

History
47 lines (28 loc) · 1.29 KB

index.mdx

File metadata and controls

47 lines (28 loc) · 1.29 KB
title Spinner
description A visual indicator of a loading or processing state.
source packages/raystack/components/spinner

import { playground, sizeDemo, colorDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

import { Spinner } from "@raystack/apsara";

<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:

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.

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.
  • Respects motion preferences: spinner rotation is enabled only when prefers-reduced-motion: no-preference