Spinner
Animated SVG loading spinner with size and color variants
Usage
tsx
import { Spinner } from '@tryvienna/ui'
<div className="flex items-center gap-4">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</div>Examples
Default
tsx
<div className="flex items-center gap-4">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</div>Variants
tsx
<div className="flex items-center gap-4">
<Spinner variant="default" />
<Spinner variant="muted" />
<div className="bg-gray-800 p-4 rounded">
<Spinner variant="white" />
</div>
<Spinner variant="current" className="text-red-500" />
</div>Variants
| Name | Options | Default |
|---|---|---|
size | xs | sm | md | lg | xl | md |
variant | default | muted | white | current | default |
API Reference
Spinner
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - |
Also accepts all props from React.ForwardRefExoticComponent.
Data Attributes
| Component | data-slot |
|---|---|
Spinner | "spinner" |