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

// Default spinner
<Spinner />

// Medium spinner
<Spinner size={32} />

// Large spinner
<Spinner size={48} />

Custom Styling

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