Spinner

The Spinner component provides a rotating SVG animation to indicate loading or processing states. It includes screen reader support via a hidden label.

Import

import { Spinner } from '@nim-ui/components';

Basic Usage

Code

<Spinner />

Sizes

Four sizes available: sm, md (default), lg, and xl.

Code

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Variants

Five color variants to match different contexts.

Code

<Spinner variant="default" />
<Spinner variant="secondary" />
<Spinner variant="success" />
<Spinner variant="destructive" />
<Spinner variant="info" />

Props

Name	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the spinner
`variant`	`'default' \| 'secondary' \| 'success' \| 'destructive' \| 'info'`	`'default'`	Color variant
`label`	`string`	`'Loading'`	Screen reader label text
`className`	`string`	-	Additional CSS classes

Usage Examples

Button with Loading State

<Button disabled={isLoading}>
  {isLoading && <Spinner size="sm" variant="secondary" />}
  {isLoading ? 'Saving...' : 'Save'}
</Button>

Full Page Loading

function PageLoader() {
  return (
    <div className="flex h-screen items-center justify-center">
      <Spinner size="xl" label="Loading page..." />
    </div>
  );
}

Accessibility

Wrapped in role="status" container for screen reader announcements
SVG uses aria-hidden="true" to prevent redundant announcements
Hidden sr-only label provides accessible text (customizable via label prop)

Progress — Determinate progress bar
Skeleton — Content placeholder
Button — Button with built-in loading state

On this page