46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. 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<SVGSVGElement> | - | 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
|
|
<Spinner />
|
|
|
|
// Medium spinner
|
|
<Spinner size={32} />
|
|
|
|
// Large spinner
|
|
<Spinner size={48} />
|
|
```
|
|
|
|
## 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} />
|
|
``` |