Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Loading Component

CSS-only Tailwind CSS loading indicator with spinner, dots, ring, and bars animations. Color and size variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Les composants de chargement affichent des indicateurs visuels pendant la récupération ou le traitement du contenu, ce qui permet aux utilisateurs d'être informés et d'éviter les retards perçus. Construits avec du HTML sémantique et des animations CSS fluides, les spinners de chargement communiquent les opérations actives en arrière-plan. Le système de chargement Frutjam prend en charge plusieurs styles, couleurs et tailles, idéal pour les tableaux de données, les téléchargements de fichiers, les soumissions de formulaires et les opérations asynchrones.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
loadingBaseIndicateur d'anneau tournant, hérite de la couleur du texte par défaut
loading-dotsStyleTrois points palpitants
loading-barsStyleTrois barres verticales animées
loading-xsTailleTrès petit (1rem)
loading-smTaillePetit (1,25 rem)
loading-mdTailleMoyen (1,5 rem, par défaut)
loading-lgTailleGrand (2rem)
loading-xlTailleTrès grand (2,5 rem)
loading-baseCouleurCouleur de la surface de base atténuée
loading-currentCouleurHérite explicitement de la couleur actuelle du texte
loading-primaryCouleurCouleur du thème principal
loading-secondaryCouleurCouleur du thème secondaire
loading-accentCouleurCouleur du thème d'accentuation
loading-neutralCouleurCouleur du thème neutre
loading-infoCouleurCouleur sémantique de l'information
loading-successCouleurCouleur sémantique du succès
loading-warningCouleurCouleur sémantique d’avertissement
loading-errorCouleurCouleur sémantique des erreurs

Utilisation de base

<span class="loading"></span>

<span className="loading"></span>

<span class="loading"></span>

Chargement des styles

html 
1
2
3
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>

Tailles de chargement

html 
1
2
3
4
5
<span class="loading loading-xs"></span>
<span class="loading loading-sm"></span>
<span class="loading loading-md"></span>
<span class="loading loading-lg"></span>
<span class="loading loading-xl"></span>

Chargement des couleurs

html 
1
2
3
4
5
6
7
8
9
<span class="loading loading-base"></span>
<span class="loading loading-primary"></span>
<span class="loading loading-secondary"></span>
<span class="loading loading-accent"></span>
<span class="loading loading-info"></span>
<span class="loading loading-success"></span>
<span class="loading loading-warning"></span>
<span class="loading loading-error"></span>
<span class="loading loading-neutral"></span>

Chargement de la couleur actuelle

Inherits primary text color

Inherits error text color

html 
1
2
3
4
5
6
7
8
<p class="text-primary flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits primary text color
</p>
<p class="text-error flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits error text color
</p>

Chargement dans le bouton

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<button class="btn gap-2">
  <span class="loading loading-sm"></span>
  Loading
</button>

<button class="btn btn-primary gap-2">
  <span class="loading loading-sm loading-current"></span>
  Processing
</button>

<button class="btn btn-error gap-2">
  <span class="loading loading-sm loading-current"></span>
  Deleting
</button>

États de chargement

Loading Data

Fetching information...
html 
1
2
3
4
5
6
7
8
9
<div class="card card-outline w-96">
  <div class="card-content">
    <h3 class="card-title">Loading Data</h3>
    <div class="flex items-center gap-2">
      <span class="loading loading-md"></span>
      <span>Fetching information...</span>
    </div>
  </div>
</div>