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 et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orochia, Orazaka.
Quand l’utiliser
- For a short wait of unknown length: a search, a refresh, an infinite list loading more.
Quand ne pas l’utiliser
- When the layout of what is loading is known.À la place : Skeleton
- When the progress is known and the wait is long: a bar says how far.À la place : Progress
- When the wait may be instant (it would flash), or ends with a result to announce.À la place : Loader
- Inside a button that runs an action: set
loadingon the button.À la place : Button
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Spinner, LoaderGlyph } from "@krizaka/ui/spinner";Exemples
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 | Défaut | 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 | Défaut | Description |
|---|---|---|---|
labelrequis | 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. |
Accessibilité
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.
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub