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} />
```