Spinner

Loading indicators in three flavors — ring, dots and bars — that inherit the current text color.

Feedback

Playground

Tweak the props, the preview and the code follow.

Props

variant

size

color

label

<Spinner size="lg" />

npx @plumsydev/plum-ui add spinner

import { Spinner } from "@/components/ui/spinner"

<Spinner variant="bars" />

Size tokens, or any size-* and text-* class.

Building acme-web

Queued

Prop	Type	Default
`variant` Animation style.	`"ring" \| "dots" \| "bars"`	`"ring"`
`size` Size token (14, 16 or 24px).	`"sm" \| "default" \| "lg"`	`"default"`

Rendered with role="status" and an accessible label. Override aria-label to describe what's loading.