Spinner
The Krizaka spinner: light traced around a hexagon, its node breathing — indeterminate, or growing to a value; still and legible under reduced motion.
Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.
Why it is here. Used by Orochia, Orazaka.
When to use
- For a short wait of unknown length: a search, a refresh, an infinite list loading more.
When not to use
- When the layout of what is loading is known.Use instead: Skeleton
- When the progress is known and the wait is long: a bar says how far.Use instead: Progress
- When the wait may be instant (it would flash), or ends with a result to announce.Use instead: Loader
- Inside a button that runs an action: set
loadingon the button.Use instead: Button
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Spinner, LoaderGlyph } from "@krizaka/ui/spinner";Examples
Searching in place
A short wait beside its words: the light travels, the node breathes.
A determinate wait
value from 0 to 1: the trace grows to what is done, in the same footprint.
Sizes and colour
The minimal API: size sm · md · lg; the colour is currentColor.
Props
LoaderGlyph
The glyph alone (decorative): the Spinner, the Loader and the Button's loading draw it.
| Prop | Type | Default | Description |
|---|---|---|---|
state | LoaderGlyphState | loading | loading · success · error. |
value | number | null | — | Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. |
Spinner
The Krizaka spinner: a hexagon traced by a segment of light around a breathing node, in currentColor (the accent by
default). role="status", named by label. Under prefers-reduced-motion it rests — a segment and the node lit.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The accessible name of the wait, e.g. "Loading" — passed translated. |
size | "sm" | "md" | "lg" | md | sm · md · lg. |
value | number | null | — | Between 0 and 1: the trace grows to the value (a determinate wait). Absent: it travels around. |
Accessibility
role="status"named bylabel: announced politely.- Under
prefers-reduced-motionit rests on a designed still frame: a third of the hexagon traced and the node lit — never a frozen blur.
Best practices
- One spinner per region: never a page full of them.
- Pass
labeltranslated (“Loading”, “Searching”) and, when you know it,value: a growing trace reassures more than a loop. - A wait that may be instant, that ends in success or failure, or that can last: use
Loader, which waits before showing itself and hands over to a skeleton.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub