Composant · Feedback

InlineLoading

Stable

Indicateur de chargement compact avec libellé, statuts active/success/error/inactive et icônes Lucide `LoaderCircle`, `CircleCheck` et `CircleAlert`.

Exemples

États

Chargement en cours…

Modification enregistrée.

Impossible d’enregistrer.

En attente d’action.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <InlineLoading status="active" label="Chargement en cours…" />
  <InlineLoading status="success" label="Modification enregistrée." />
  <InlineLoading status="error" label="Impossible d’enregistrer." />
  <InlineLoading status="inactive" label="En attente d’action." />
</div>

Sans libellé

Voir le code (Svelte)

<div class="docs-demo-stack">
  <InlineLoading status="active" />
  <InlineLoading status="success" />
  <InlineLoading status="error" />
  <InlineLoading status="inactive" />
</div>

Transition de statut

Chargement en cours…

Voir le code (Svelte)

<InlineLoading status="active" label="Chargement en cours…" />

En usage réel, le `status` change selon l’état de la requête (active → success / error).

API

Prop	Type	Default
`status`	`"active" \| "success" \| "error" \| "inactive"`	`"active"`
`label`	`string`	optionnel
`class`	`string`	optionnel

Le composant rend un <div role="status"> (ou role="alert" en statut error) avec aria-live="polite". L’icône Lucide affichée dépend du statut : LoaderCircle (active, animé via une keyframe CSS qui respecte prefers-reduced-motion), CircleCheck (success), CircleAlert (error). Le statut inactive n’affiche pas d’icône et grise le libellé. Toutes les autres props HTML <div> sont transmises via spread.