Chargement

Spinner (tailles)

Utiliser loading loading-spinner avec un modificateur de taille. Choisir la taille selon le contexte : xs pour les indicateurs discrets, sm pour les boutons, md pour les sections, lg pour les pages entières.

<span class="loading loading-spinner loading-xs"></span>
<span class="loading loading-spinner loading-sm"></span>
<span class="loading loading-spinner loading-md"></span>
<span class="loading loading-spinner loading-lg"></span>

Spinner dans un bouton

Remplacer l'icône ou le texte par un spinner pendant le traitement. Toujours désactiver le bouton avec disabled pour éviter les soumissions multiples.

<button class="btn btn-primary" disabled>
  <span class="loading loading-spinner loading-sm"></span>
  Enregistrement...
</button>

Skeleton (placeholder)

Afficher des skeletons pendant le chargement des listes, tables et cards. Reproduire la forme approximative du contenu attendu pour réduire le sentiment d'attente.

<!-- Bloc de texte -->
<div class="space-y-2">
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-3/4"></div>
</div>

<!-- Card -->
<div class="card bg-base-100 border border-base-200 shadow-sm w-64">
  <div class="card-body gap-3">
    <div class="skeleton h-4 w-3/4"></div>
    <div class="skeleton h-3 w-full"></div>
    <div class="skeleton h-3 w-2/3"></div>
    <div class="skeleton h-8 w-24 mt-2"></div>
  </div>
</div>

<!-- Lignes de table -->
<div class="card bg-base-100 border border-base-200 shadow-sm">
  <div class="card-body gap-3 py-4">
    <div class="flex gap-4">
      <div class="skeleton h-4 w-24"></div>
      <div class="skeleton h-4 w-32"></div>
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-16 ml-auto"></div>
    </div>
    <div class="flex gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
      <div class="skeleton h-4 w-24"></div>
      <div class="skeleton h-4 w-12 ml-auto"></div>
    </div>
  </div>
</div>

Page entière en chargement

Pour les chargements initiaux de page ou de section majeure. Centrer le spinner dans le conteneur disponible et ajouter un label contextuel.

<div class="flex items-center justify-center min-h-64">
  <div class="flex flex-col items-center gap-3">
    <span class="loading loading-spinner loading-lg text-primary"></span>
    <p class="text-sm text-base-content/40">Chargement du catalogue...</p>
  </div>
</div>

Règles