Brickslab.

@brickslab/ui-web

Indicateur de chargement CSS-only. Animation @keyframes injectée via une balise style — aucun JavaScript nécessaire. Supporte 6 variantes de couleur, 4 tailles, 3 vitesses et un label accessible aria-label.

Aperçu

variant=brand, size=md, speed=normal (défauts)

Variantes

default · brand · success · warning · error · white

default
brand
success
warning
error
white

Tailles

sm 16px · md 24px · lg 32px · xl 48px

sm
md
lg
xl

Vitesse

slow 1.2s · normal 0.7s · fast 0.35s

slow
normal
fast

Usage contextuel

dans un bouton · avec texte · sur fond sombre

Récupération des données…
Chargement…

Props

PropTypeDéfautRequisDescription
variant"default" | "brand" | "success" | "warning" | "error" | "white""brand"—Couleur de l'arc animé.
size"sm" | "md" | "lg" | "xl""md"—Taille du spinner en pixels (16 / 24 / 32 / 48).
speed"slow" | "normal" | "fast""normal"—Vitesse de rotation (1.2s / 0.7s / 0.35s).
labelstring"Chargement…"—Texte accessible aria-label pour les lecteurs d'écran.

Utilisation

tsx
import { Spinner } from "@brickslab/ui-web";

// Basique
<Spinner />

// Variantes
<Spinner variant="brand" />
<Spinner variant="success" />
<Spinner variant="warning" />
<Spinner variant="error" />
<Spinner variant="default" />

// Tailles
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

// Vitesse
<Spinner speed="slow" />
<Spinner speed="normal" />
<Spinner speed="fast" />

// Avec label accessible
<Spinner label="Enregistrement en cours…" />

// Dans un bouton
<button disabled style={{ display: "flex", alignItems: "center", gap: 8 }}>
  <Spinner size="sm" variant="white" />
  Chargement…
</button>