Loading Spinner
An animated loading indicator using token-driven colors, sizes, and durations. SVG-based with reduced-motion support.
Preview
Import
import { LoadingSpinner } from "@sigil-ui/components";Usage
<LoadingSpinner />Sizes
<LoadingSpinner size="sm" />
<LoadingSpinner size="md" />
<LoadingSpinner size="lg" />Custom color
<LoadingSpinner color="var(--s-primary)" />
<LoadingSpinner color="var(--s-text-muted)" />
<LoadingSpinner color="white" />Inside a button
<Button disabled>
<LoadingSpinner size="sm" color="currentColor" />
Saving...
</Button>Full-page loading
<div className="flex items-center justify-center min-h-dvh">
<Stack gap={16} align="center">
<LoadingSpinner size="lg" />
<p className="text-[var(--s-text-muted)]">Loading...</p>
</Stack>
</div>Token integration
| CSS Variable | Used for |
|---|---|
--s-primary | Default spinner color |
--s-duration-slow | Rotation cycle duration |
--s-ease-default | Rotation easing |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Spinner diameter |
color | string | var(--s-primary) | Stroke color |
className | string | — | Additional CSS classes |
Accessibility
- Renders with
role="status"andaria-label="Loading" prefers-reduced-motionreplaces animation with a static opacity pulse