Loading

Indicateur de chargement avec une icône animée (rotation) et un texte descriptif centrés horizontalement et verticalement.

Démo en direct

Chargement en cours...

L'icône tourne en continu grâce à animate-spin.

Code source complet — copier-coller

Exemple d'affichage d'un indicateur de chargement pendant une requête API.

import { Loading } from "@ramses1er/cbk-toolkit/client";

function UsersPage() {
  const { isPending, data } = useGetUsers();

  if (isPending) {
    return <Loading text="Chargement des utilisateurs..." />;
  }

  return <div>... contenu ...</div>;
}

Props

Prop	Type	Défaut	Description
text	string	requis	Texte descriptif affiché sous l'icône

Comportement

Utilise l'icône Loaderde lucide-react avec l'animation animate-spin
Le conteneur est centré horizontalement et verticalement avec flex items-center justify-center
Idéal pour les états de chargement de pages ou de sections entières