Spinner
Feedback
Data Display
Loading indicators with multiple variants and sizes.
Variants
Different spinner styles for various use cases
Default
Primary
Secondary
Pulse
Sizes
From extra small to extra large
XS
SM
MD
LG
XL
With Labels
Add descriptive labels to spinners
Loading...
Processing data...
Uploading files...
Speed Control
Adjust animation speed
Slow
Normal
Fast
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Spinner size |
variant | 'default' | 'primary' | 'secondary' | 'dots' | 'pulse' | 'bars' | 'default' | Visual variant |
speed | 'slow' | 'normal' | 'fast' | 'normal' | Animation speed |
label | string | — | Loading label text |
color | string | — | Custom spinner color |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { Spinner } from '@/components/ui/spinner'
// Basic spinner
<Spinner />
// Primary variant with label
<Spinner variant="primary" size="lg" label="Loading..." />
// Different variants
<Spinner variant="dots" />
<Spinner variant="pulse" />
<Spinner variant="bars" />
// Speed control
<Spinner speed="slow" />
<Spinner speed="fast" />
// Custom color
<Spinner color="#6366f1" />Features
Built-in functionality
- 6 variants: Default, primary, secondary, dots, pulse, bars
- 5 sizes: Extra small to extra large
- Speed control: Slow, normal, fast animation speeds
- Labels: Optional loading text below spinner
- Custom colors: Override default colors
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="status" for loading indicatoraria-busy="true" during loadingaria-label for screen readersNotes
- Screen readers announce loading state
- Label text is accessible
- Reduced motion support available