Spinner
StableSVG loading indicator with consistent rendering at all sizes. Screen-reader label always present by default — accessible without extra configuration.
DisplayVhyxSeal
- Type
- display
- Intent
- display-loading
- Safety
- low
- Confirm
- not needed
- Undo
- one-way
Interactive example
Import
tsx
import { Spinner } from '@vhyxui/react'Variants
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the spinner. |
variant | 'default' | 'accent' | 'white' | 'default' | Color variant. Use white on dark backgrounds. |
label | string | "Loading" | Screen-reader accessible label. Always rendered as sr-only text. |
Also accepts all standard SVGElement attributes.
Accessibility
-
role="status"on the SVG — state is communicated to assistive technology. - Visually hidden
labelalways rendered — defaults to "Loading". Never invisible to screen readers. - SVG spinner — better rendering quality than the CSS border-trick at all sizes and resolutions.
- Animation collapses to zero duration with
prefers-reduced-motion: reduce.
Agent contract
Default VhyxSeal contract shipped with every Spinner.
Default contract
{
"type": "display",
"intent": "display-loading",
"description": "Indicates that an asynchronous operation is in progress",
"requires": [],
"requiredPermissions": [],
"consequence": "None — display only.",
"affects": [],
"reversible": false,
"safetyLevel": "low",
"requiresConfirmation": false,
"destructive": false,
"contractVersion": "0.0.1",
"fingerprint": "vhyxs_10d0deef"
}Theming
Override these CSS tokens to theme Spinner.
--vhyx-color-text-mutedDefault spinner track color
--vhyx-color-accentAccent variant color
--vhyx-duration-glacialRotation speed (500ms per revolution)