1.2 KiB
1.2 KiB
- Home
- Components
- Spinner
Spinner
The Spinner component provides a visual loading indicator with a smooth ring animation. It's built using SVG animations for optimal performance and customization.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 24 | Size of the spinner in pixels |
| className | string | - | Additional CSS classes |
| style | CSSProperties | - | Inline styles |
| ...svg props | SVGProps | - | All native SVG props are supported |
Overview
Spinners are used to indicate loading states or ongoing processes. They provide visual feedback to users that the application is working on their request.
Basic Usage
Loading... Loading... Loading... ```jsx // Default spinner
// Medium spinner
// Large spinner
## Custom Styling
Loading... Loading... Loading... Loading... ```jsx
// Custom colors using className
<Spinner className="text-blue-500" />
<Spinner className="text-green-500" size={32} />
<Spinner className="text-red-500" size={48} />
// Custom color using style
<Spinner style={{ color: '#8B5CF6' }} size={32} />