Web + MobileStableRetours

Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.

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.À la place : Progress
Inside a button that runs an action: set loading on the button.À la place : Button

Installation

Installer

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Spinner } from "@krizaka/ui/spinner";

Exemples

Default

Named by label.

import { Spinner } from "@krizaka/ui/spinner";

export default function SpinnerDefault() {
  return <Spinner label="Loading" />;
}

Sizes

sm, md, lg.

import { Spinner } from "@krizaka/ui/spinner";

export default function SpinnerSizes() {
  return (
    <div className="flex items-center gap-4">
      <Spinner label="Loading" size="sm" />
      <Spinner label="Loading" size="md" />
      <Spinner label="Loading" size="lg" />
    </div>
  );
}

Muted

The colour follows className.

import { Spinner } from "@krizaka/ui/spinner";

// The colour follows `className` (here a text role).
export default function SpinnerMuted() {
  return <Spinner label="Loading" className="text-fg-secondary" />;
}

Props

A turning ring with role="status" (it stops turning under prefers-reduced-motion).

Prop	Type	Défaut	Description
`label`requis	`string`	—	The accessible name of the wait, e.g. "Loading" — passed translated.
`size`	`"sm" \| "md" \| "lg"`	`md`	sm · md · lg.

Accessibilité

role="status" named by label: announced politely.
It stops turning under prefers-reduced-motion.

Bonnes pratiques

One spinner per region: never a page full of them.
Pass label translated (“Loading”, “Searching”).

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Spinner