Spinner
A rotating diamond with a clear loading announcement.
Live — this one is real
Usage
import { Spinner } from "mizu-ui";
export function Example() {
return <Spinner label="Loading artwork" size={18} />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect ui/Spinner.tsx
Source is included in the npm package under src/ui/Spinner.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 14 | Side in pixels. |
| label | string | "Loading" | Accessible loading name. |
| tone | "accent" | "paper" | "muted" | "accent" | Color token. |
Accessibility
A labelled status; reduced motion stops rotation.
Motion
Linear rotation; static under reduced motion.