Spinner
Loading indicator. Respects `prefers-reduced-motion`.
Preview
Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.
Playground
Flip props to see how the component responds. The snippet below updates as you change options.
Installation
Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.
$ pnpm add @sisyphos-ui/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
import { Spinner } from "@sisyphos-ui/react";
export const Loading = () => <Spinner size="md" color="primary" />;Sizes
Variants & thickness
Pick between `ring`/`double` styles, tune stroke weight with `thickness`, and pass a `label` for screen readers.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Spinner dimensions. |
| color | "primary" | "success" | "error" | "warning" | "info" | "neutral" | "inherit" | "primary" | Stroke color; `inherit` uses `currentColor` (useful inside buttons). |
| thickness | number | 3 | Ring thickness in px. |
| variant | "ring" | "double" | "ring" | Single rotating arc, or outer arc plus counter-rotating inner arc. |
| label | string | "Loading" | Accessible label announced to screen readers. |
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.
Accessibility
- The root exposes
role="status", an implicit polite live region, so assistive tech is notified when the spinner appears. - A screen-reader label is always present via
aria-label(labelprop, defaults to"Loading"). - The SVG artwork is
aria-hidden="true"andfocusable="false"— only the label is announced, and the spinner never receives focus.