Spinner

Interactive

See Spinner in Storybook for every variant, with live controls.

An indeterminate loading indicator. When you know the proportion done, use Progress.

import { Spinner } from "@kairosis/eidos";

<Spinner label="Loading runs" />
<Spinner size={24} />

Props

Prop	Type	Default	Description
size	number	16	Diameter, px
color	string	var(--primary)	The arc's colour
label	string	—	Visible text beside the spinner

Guidelines

• label does double duty: it renders beside the spinner and names it for screen readers. Without it, the accessible name falls back to "Loading".
• Say what's loading ("Loading runs"), not just "Loading".
• Respects prefers-reduced-motion by slowing the rotation rather than stopping it — a frozen spinner would read as a hang.
• For content-shaped waits (a list, a card), Skeleton is calmer.