Loader Dots Wave

Aperçu

Trois variantes de taille sont affichées sur un fond sombre.

Cas d’utilisation et fonctionnalités

• Affichage de chargement/traitement : Utilisé pour avertir l’utilisateur de l’attente lors de la réalisation d’une requête API, de la récupération de données, etc.

• Vous pouvez librement modifier le nombre de points : ajoutez/supprimez simplement l’élément div.dot dans le HTML.

• Pure CSS : aucun JavaScript requis. Peut être intégré directement dans les éléments d’affichage.

• Accessibilité : compatible avec les lecteurs d’écran en ajoutant aria-label="Loading" et role="status".

Points de conception et d’UX

1. Délai de 0,16 seconde pour chaque point : Ce délai crée un rythme visuel ondulant.

2. Courbe d’entrée-sortie : Chaque point semble avoir un rebond élastique.

3. **Fondu « opacité » : un effet visuel de danse légère en réduisant l’opacité à mesure qu’elle augmente.

Comment personnaliser

Variations de taille (SM / MD / LG)

.dot-sm { width: 8px; height: 8px; }

.dot-md { width: 12px; height: 12px; }

.dot-lg { width: 18px; height: 18px; }

Modification de la vitesse d’animation

/* Plus rapide */

.dot { animation-duration: 0.8s; }



/* En retard */

.dot { animation-duration: 2s; }

Couleur personnalisée

.dot { background: #f97316; } /* orange */

##Code d’implémentation

<div class="dots-row" role="status" aria-label="Loading">

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

</div>



<style>
.dots-row { display: flex; align-items: center; gap: 0.5rem; }

.dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #6366f1;

animation: dots-wave 1.4s ease-in-out infinite;

}

.dot:nth-child(1) { animation-delay: 0s; }

.dot:nth-child(2) { animation-delay: 0.16s; }

.dot:nth-child(3) { animation-delay: 0.32s; }

.dot:nth-child(4) { animation-delay: 0.48s; }

.dot:nth-child(5) { animation-delay: 0.64s; }

@keyframes dots-wave {

0%, 60%, 100% { transform: translateY(0); opacity: 1; }

30% { transform: translateY(-12px); opacity: 0.7; }

}
</style>

État de compatibilité du navigateur

| Navigateur | Statut de compatibilité |

|--------|-------|

| Chrome 43+ | ✅ Entièrement compatible |

| Firefox 16+ | ✅ Entièrement compatible |

| Safari 9+ | ✅ Entièrement compatible |

| Bord 79+ | ✅ Entièrement compatible |