Stepwise UI

Spinner

A circular spinner that resolves into a tick or a cross when it finishes. Two variants - a sweeping arc for general use, and a dotted activity-indicator style for a lighter touch. Looking for the dot grid loader? It has its own page now.

Installation

npx stepwise-ui add spinner

Spinner

Three sizes - sm (16px), default (24px), and lg (32px) - or pass an exact pixel diameter.
sm
default
lg
import { Spinner } from '@/components/stepwise/spinner'

// "arc" is the default - a general-purpose spinner for any surface
<Spinner size="sm" />
<Spinner size="default" />
<Spinner size="lg" />

Dots

Eight fading dots sweep around the center - the same activity-indicator language as iOS/macOS. Pass variant="dots".
sm
default
lg
<Spinner variant="dots" size="sm" />
<Spinner variant="dots" size="default" />
<Spinner variant="dots" size="lg" />

Status

One component for the whole lifecycle. Pass a status and the ring closes into a filled disc, then the tick (or cross) draws on with a spring - the end state grows out of the spinner instead of replacing it.
// Drive it straight from your async state - the ring resolves and the
// tick draws itself on, so the resolve reads as one gesture.
<Spinner status={saving ? 'loading' : saved ? 'success' : 'error'} />

Props

PropTypeDescription
status
"loading" | "success" | "error"
Drives the whole lifecycle. Default "loading".
size
"sm" | "default" | "lg" | number
Named preset or exact px diameter. Default "default".
variant
"arc" | "dots"
A sweeping stroke, or eight fading dots. Default "arc".