Skip to content
Nim UI

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

Default Spinner

Loading
View Code 
<Spinner />

Sizes

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

Spinner Sizes

LoadingLoadingLoadingLoading
View Code 
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Variants

Five color variants to match different contexts.

Spinner Variants

LoadingLoadingLoadingLoadingLoading
View 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