Spinner
StableSVG loading indicator with consistent rendering at all sizes. Screen-reader label always present by default — accessible without extra configuration.
DisplayVhyxSeal
Interactive example
Default and accent spinners
Import
tsx
import { Spinner } from '@vhyxui/react'Variants
default, accent, white (shown on dark background)
Sizes
xs, sm, md, lg, xl
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)
Examples
Full-page loading state
Centered spinner with custom label
Inside a Button while loading
Button with inline spinner