Spinner
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The Spinner component provides a rotating loading indicator with multiple sizes and colors. Built with Lucide React icons and class-variance-authority, it offers consistent styling and smooth animations. Perfect for buttons, cards, overlays, and any loading states that need visual feedback.
Basic Usage
With Label
Loading...
Processing data...
Saving changes...
Sizes
xs
sm
md
lg
xl
2xl
Colors
primary
secondary
success
error
warning
info
neutral
white
Loading Buttons
Card Loading States
Overlay Loading
Inline Spinners
Saving your changes...
Processing payment...
Syncing data with server...
Uploading files (3 of 10)...
Retrying connection...
Properties
Spinner
| Property | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Size of the spinner. |
color | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "white" | "neutral" | "primary" | Color theme of the spinner. |
label | string | - | Optional label displayed below the spinner. |
className | string | - | Additional CSS classes for custom styling. |
Size Reference
| Size | Dimensions | Use Case |
|---|---|---|
xs | 16x16px | Inline text, small buttons |
sm | 24x24px | Regular buttons, form inputs |
md | 32x32px | Cards, default loading (default) |
lg | 40x40px | Large cards, prominent loading |
xl | 56x56px | Page overlays, major operations |
2xl | 80x80px | Full-page loading, splash screens |
Color Reference
| Color | Theme | Use Case |
|---|---|---|
primary | Brand color | General loading states |
secondary | Secondary brand | Alternative loading states |
success | Green | Success operations, confirmations |
error | Red | Error states, failed operations |
warning | Yellow/Orange | Warning states, caution |
info | Blue | Information, data processing |
white | White | Dark backgrounds, overlays |
neutral | Gray | Subtle loading states |
Accessibility
The Spinner component includes accessibility considerations:
- Visual Indication - Clear rotating animation indicates loading activity
- Screen Reader Support - Can be enhanced with aria-label for loading announcements
- Non-Interactive - Spinners are not focusable or interactive elements
- Color Contrast - All color variants meet accessibility contrast requirements
- Motion Sensitivity - Consider users with motion sensitivity preferences
Common Use Cases
The Spinner component is perfect for:
- Button Loading - Async operations like save, submit, delete
- Data Loading - API calls, database queries, file operations
- Page Transitions - Route changes and navigation loading
- Form Submission - Processing forms and validation
- File Operations - Upload, download, processing files
- Authentication - Login, logout, token refresh
- Real-time Updates - Live data synchronization
Best Practices
- Appropriate Sizing - Match spinner size to the context and importance
- Meaningful Labels - Use descriptive labels that explain what's loading
- Color Context - Use colors that match the operation type (success, error, etc.)
- Consistent Timing - Don't show spinners for very quick operations (<200ms)
- User Feedback - Always provide context about what's happening
- Accessibility - Consider screen readers and motion preferences
- Performance - Use spinners to improve perceived performance
- Error Handling - Replace spinners with error states when operations fail