Spinner
Shows that a process is running. Seven sizes, primary, neutral and on-colour.
Version 0.2.0 ·
Installation
bunx --bun shadcn@latest add @dga/spinnerUsage
import { Spinner } from "@/components/ui/spinner";
<Spinner label="جارٍ التحميل" />Anatomy
- Root: a
role="status"element with the animated ring. - Label: visually hidden text announced to screen readers.
Examples
Sizes and colours
Seven sizes from 2xs (20px) to 2xl (44px), in primary, neutral, on-color and current (follows the text colour, for use inside buttons).
Decorative
Pass label={null} when the surrounding element already announces the busy state, as Button does.
RTL
A ring has no direction, so nothing mirrors. Translate the label for Arabic pages.
Accessibility
role="status"with a visually hidden label, so screen readers announce it once.- With
label={null}the spinner is hidden from screen readers. - With reduced motion, the spinner turns slowly instead of stopping, so the busy state stays visible.
API Reference
Spinner
A loading indicator. Turns slowly with reduced motion.
| Prop | Type | Default |
|---|---|---|
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"Diameter in the Figma sizes, from `2xs` (20px) to `2xl` (44px). | "md" | |
| ||
"on-color" | "primary" | "neutral" | "current"Colour. `current` takes the text colour of its parent, for use inside buttons. | "primary" | |
| ||
stringText announced to screen readers. Pass `null` when something else already announces the busy state (for example a button with aria-busy). | "Loading" | |
| ||
Also accepts the props of the element it renders.
Deviations from DGA
None. This component matches the DGA Figma file.
Contrast
16 pairs checked · all pass WCAG 2.1 AAShow 3 statesHide
| Variant / state | Light | Dark |
|---|---|---|
| primary / indicator | 4.54:1 3:1 | 10.38:1 3:1 |
| neutral / indicator | 17.31:1 3:1 | 15.87:1 3:1 |
| on-color / indicator | 4.74:1 3:1 | 4.74:1 3:1 |
Text needs 4.5:1, icons and focus rings 3:1. Disabled states are exempt. Full contrast report