Dots-Wave-Loader

Vorschau

Drei Größenvarianten werden auf dunklem Hintergrund angezeigt.

Anwendungsfälle und Funktionen

• Lade-/Verarbeitungsanzeige: Wird verwendet, um den Benutzer über das Warten zu informieren, wenn er eine API-Anfrage stellt, Daten abruft usw.

• Sie können die Anzahl der Punkte frei ändern: Fügen Sie einfach das Element „div.dot“ im HTML hinzu/löschen Sie es.

• Reines CSS: Kein JavaScript erforderlich. Kann direkt in Anzeigeelemente eingebettet werden.

• Barrierefreiheit: Screenreader-kompatibel durch Hinzufügen von „aria-label=“Loading”undrole=“status”`.

Design- und UX-Punkte

1. 0,16 Sekunden Verzögerung für jeden Punkt: Diese Verzögerung erzeugt einen wellenförmigen visuellen Rhythmus.

2. „Ease-in-out“-Kurve: Jeder Punkt scheint eine elastische Sprungkraft zu haben.

3. „Deckkraft“-Fade: Ein leicht tanzender visueller Effekt durch Verringerung der Deckkraft mit zunehmender Helligkeit.

So passen Sie es an

Größenvariationen (SM / MD / LG)

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

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

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

Animationsgeschwindigkeit ändern

/* Schneller */

.dot { animation-duration: 0.8s; }



/* Spät */

.dot { animation-duration: 2s; }

Benutzerdefinierte Farbe

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

Implementierungscode

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

Browserkompatibilitätsstatus

| Browser | Kompatibilitätsstatus |

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

| Chrom 43+ | ✅ Vollständig kompatibel |

| Firefox 16+ | ✅ Vollständig kompatibel |

| Safari 9+ | ✅ Vollständig kompatibel |

| Kante 79+ | ✅ Vollständig kompatibel |