Spinner
CSS-only loading spinner. 4 sizes, 4 variants, accessible label.
Live Demo
Sizes
SmallMediumLargeExtra Large
Variants
DefaultSecondaryOutlineGhost
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the spinner. |
variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'default' | Color variant. |
label | string | 'Loading…' | Accessible label (aria-label). |
Usage
import { Spinner } from '@ghiberti85/ui'
// Default
<Spinner />
// Sizes
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
// Variants
<Spinner variant="default" />
<Spinner variant="secondary" />
<Spinner variant="outline" />
<Spinner variant="ghost" />
// Custom label
<Spinner label="Saving changes…" />