CSS-Loader-Generator
Lade-Spinner nur mit CSS: Ring, Punkte, Balken, Puls oder Ladebalken mit Farbe, Größe und Tempo – HTML und CSS kopieren.
Der CSS-Loader-Generator erzeugt Lade-Animationen ohne Bilder und ohne JavaScript: Ring, Doppelring, hüpfende Punkte, Balken, Puls oder einen unbestimmten Ladebalken. Farbe, Größe, Linienstärke und Tempo sind einstellbar. Der Code enthält role="status" für Screenreader und verlangsamt die Animation, wenn reduzierte Bewegung eingestellt ist.
<div class="loader" role="status" aria-label="Wird geladen"></div>Lade-Animationen mit CSS
Alle Loader animieren nur transform und opacity. Diese Eigenschaften
berechnet der Browser auf der Grafikkarte, ohne das Layout neu zu berechnen. So bleibt die
Animation flüssig, auch wenn die Seite gerade beschäftigt ist.
| Art | Technik |
|---|---|
| Ring | Rahmen mit einer farbigen Seite, rotate(1turn) |
| Punkte | scale() mit versetzten Startzeiten |
| Balken | scaleY() mit versetzten Startzeiten |
| Puls | Kreis wächst und blendet aus |
| Ladebalken | Pseudo-Element gleitet per translateX() |
Eigene Animationen mit Keyframes baust du im CSS-Animation-Generator, Platzhalter für Inhalte im Skeleton-Loader-Generator.
Häufige Fragen
Warum ein CSS-Loader statt GIF?
Ein CSS-Loader ist winzig, scharf auf jedem Bildschirm, lässt sich per Variable einfärben und läuft flüssig auf der Grafikkarte, weil nur transform und opacity animiert werden.
Wie mache ich den Loader barrierefrei?
role="status" und aria-label="Wird geladen" sorgen dafür, dass Screenreader den Ladezustand ansagen. Bei reduzierter Bewegung läuft die Animation deutlich langsamer, statt ganz zu stoppen, damit weiterhin erkennbar ist, dass etwas passiert.
Spinner oder Skeleton?
Spinner passen zu kurzen Aktionen ohne bekanntes Ergebnis, etwa beim Absenden eines Formulars. Wenn die Struktur des Inhalts bekannt ist, wirkt ein Skeleton-Platzhalter schneller.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.