CSS-Loader-Generator (Laden)
Tippe auf ein Modell, passe Farbe, Größe und Geschwindigkeit an und kopiere den Code. Alle nutzen nur transform und opacity, die für den Browser leicht sind, und beachten, wer weniger Bewegung bevorzugt.
So geht’sLade-Animationen in CSS
Verfügbar auf: 
CSS-Loader-Generator (Laden): wofür es gut ist
Wähle zwischen sieben Modellen der Ladeanzeige (Ring, Doppelring, Punkte, Balken, Puls, Fortschrittsbalken und drehendes Quadrat) und passe Farbe, Größe und Dauer an. Die Animationen nutzen nur transform und opacity.
Der Code kommt mit role=status, einem versteckten Text für Screenreader und langsamerer Animation für alle, die im System weniger Bewegung wünschen.
So geht’s
- Wähle das Modell des Loaders.
- Passe Farbe, Größe und Dauer an.
- Kopiere HTML und CSS.
Wann nutzen
- Ladebildschirme von Websites und Systemen.
- Schwere Lade-GIFs ersetzen.
Häufige Fragen
Warum CSS statt GIF?
Der Loader in CSS wiegt wenige Bytes, bleibt auf jedem Bildschirm scharf, ändert die Farbe mit einer Variablen und läuft außerhalb des Hauptthreads des Browsers, bleibt also flüssig, auch während die Seite lädt.
Ist der Loader barrierefrei?
Der Code enthält role="status" und einen versteckten Text (Lädt…) für Screenreader. Mit prefers-reduced-motion wird die Animation deutlich langsamer für alle, die weniger Bewegung wünschen.
Wann zeige ich einen Loader?
Nur wenn das Warten über etwa eine halbe Sekunde geht. Bei sehr kurzem Warten stört ein auf dem Bildschirm blitzender Loader mehr, als er hilft.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.