Spinner

Installation

npx vayu-ui init #one time only

npx vayu-ui add spinner

npx vayu-ui add -t spinner #with test case needs

Usage

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="md" aria-label="Loading search results" />
<Spinner className="border-info-500 border-t-transparent" />

Anatomy

import { Spinner } from 'vayu-ui';

<Spinner size="md" aria-label="Loading" />;

• Spinner — Animated circular indicator rendered as a <span> with role="status". Accepts size (sm, md, lg) to control dimensions and aria-label for accessible labeling. The spinner uses border-brand by default and can be recolored via className.

Accessibility

• Keyboard Support: Spinner is non-interactive. No keyboard handling required.
• ARIA Attributes:
  • role="status" on the root <span> to expose it as a live region.
  • aria-live="polite" to announce state changes without interrupting the user.
  • aria-busy="true" to indicate loading is in progress.
  • aria-label (default "Loading") provides context for screen readers.
• Focus Behavior: Non-interactive element. No focus management needed.

Screen reader behavior

When a screen reader encounters the spinner, it announces the aria-label value (default: "Loading") as a status message. The aria-live="polite" region ensures the announcement is queued and delivered without interrupting current speech. When the spinner is removed from the DOM, the live region update signals that loading has completed. The aria-busy="true" attribute communicates to assistive technology that the surrounding content is still being updated. Animation automatically halts for users who prefer reduced motion via prefers-reduced-motion.

Component Folder Structure

Spinner/
├── Spinner.tsx            # Spinner component with size configuration
├── types.ts               # SpinnerProps and SpinnerSize types
├── index.ts               # Re-exports Spinner component and types
└── README.md              # Component usage reference

Props

Spinner