Overview
LoadingSpinner provides a standalone animated spinner for loading states. It wraps Font Awesome's spinner icon with accessibility support including role='status' and aria-label attributes.
Key Features
- Three size variants: sm (16px), default (24px), lg (32px)
- Uses primary brand color by default
- Customizable colors via className (text-success, text-destructive, etc.)
- Built-in accessibility with role='status' and screen reader text
Examples
Size Variants
Three sizes available: sm for inline text, default for buttons and cards, lg for page-level loading states.
Loading
sm (16px)Loading
default (24px)Loading
lg (32px)Loading
xl (48px)Loading
2xl (64px)Custom Colors
Override the default primary color using semantic text classes.
Loading
Primary (default)Loading
SuccessLoading
WarningLoading
DestructiveCentered Loading State
Common pattern: center the spinner in a container for page-level or section loading states.
Loading
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "xl" | "2xl" | "default" | Spinner size: 'sm' (16px), 'default' (24px), or 'lg' (32px) |
className | string | - | Additional CSS classes (use text-* for colors) |
Usage
import { LoadingSpinner } from '@/ui/components';
// Default size and color
<LoadingSpinner />
// Size variants
<LoadingSpinner size="sm" /> // 16px
<LoadingSpinner size="default" /> // 24px
<LoadingSpinner size="lg" /> // 32px
<LoadingSpinner size="xl" /> // 48px
<LoadingSpinner size="2xl" /> // 64px (full screen loader)
// Custom colors via className
<LoadingSpinner className="text-success" />
<LoadingSpinner className="text-warning" />
<LoadingSpinner className="text-destructive" />
// Full screen loading state
<div className="flex h-screen items-center justify-center">
<LoadingSpinner size="2xl" />
</div>