Stateful Spinner

pointer

A compact loading primitive with clear motion and static fallback.

Livedark

Continuous blade spinner with a static reduced-motion fallback via site CSS.

Behavior

A compact iOS-style blade spinner with light and dark treatments and a static reduced-motion fallback.

Interaction

Pointer and touch toggle the surface treatment. No keyboard-only affordance beyond the toggle button.

Controls

Toggle light/dark blade color. Observe the CSS animation vs the static reduced-motion state.

Motion & sound

Continuous blade rotation. With prefers-reduced-motion, blades freeze and a quiet label remains. No sound.

Learnings

A loading primitive earns its place when the light/dark variants stay legible on both canvas polarities.

Source

Reuse `IOSpinner` and `@dammydev/lab/styles/spinner.css`. Keep the CSS import at the specimen boundary. Props: `light?: boolean`, `className?: string`.