---
title: "Loading"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Loading with spinner, dots, bars, and ring variants. Multiple sizes and colors for accessible async feedback indicators."
url: https://frutjam.com/fr/components/loading
---

# Loading Component

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                                                            |
| ----------------- | ------- | ---------------------------------------------------------------------- |
| loading           | Base    | Indicateur d'anneau tournant, hérite de la couleur du texte par défaut |
| loading-dots      | Style   | Trois points palpitants                                                |
| loading-bars      | Style   | Trois barres verticales animées                                        |
| loading-xs        | Taille  | Très petit (1rem)                                                      |
| loading-sm        | Taille  | Petit (1,25 rem)                                                       |
| loading-md        | Taille  | Moyen (1,5 rem, par défaut)                                            |
| loading-lg        | Taille  | Grand (2rem)                                                           |
| loading-xl        | Taille  | Très grand (2,5 rem)                                                   |
| loading-base      | Couleur | Couleur de la surface de base atténuée                                 |
| loading-current   | Couleur | Hérite explicitement de la couleur actuelle du texte                   |
| loading-primary   | Couleur | Couleur du thème principal                                             |
| loading-secondary | Couleur | Couleur du thème secondaire                                            |
| loading-accent    | Couleur | Couleur du thème d'accentuation                                        |
| loading-neutral   | Couleur | Couleur du thème neutre                                                |
| loading-info      | Couleur | Couleur sémantique de l'information                                    |
| loading-success   | Couleur | Couleur sémantique du succès                                           |
| loading-warning   | Couleur | Couleur sémantique d’avertissement                                     |
| loading-error     | Couleur | Couleur sémantique des erreurs                                         |

## Utilisation de base

## Chargement des styles

```html
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>
```

## Tailles de chargement

```html
<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
<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

```html
<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
<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

```html
<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>
```