CSS Lade-Animation

Einstellungen

40px
0.8s

Vorschau & CSS

 
   
 
 
   
 
 
 
Anleitung
 
     
  1. Loader-Typ wählen — Zwischen Spinner, Dots, Bar und Pulse wählen.
    2.  
  2. Farbe bestimmen — Den Farbwähler verwenden, um die Marken- oder UI-Farbe anzupassen.
    3.  
  3. Größe einstellen — Den Größen-Schieberegler zwischen 20px und 80px anpassen.
    4.  
  4. Geschwindigkeit anpassen — Animationsdauer von 0,3s (schnell) bis 2s (langsam) einstellen.
    5.  
  5. CSS kopieren — Das vollständige CSS inklusive @keyframes und der .loader-Klasse erhalten.
    6.  
 
 
 
Was sind CSS-Ladeanimationen?
 
CSS-Ladeanimationen sind reine CSS-Animationen, die Lade- oder Verarbeitungszustände anzeigen. Sie benötigen keine Bilder, kein JavaScript und keine externen Bibliotheken — nur HTML und CSS.
 
Jeder Loader verwendet CSS-@keyframes für die Animation und Eigenschaften wie border, transform und opacity für die Bewegung. Da sie compositor-freundliche Eigenschaften nutzen, laufen sie auch auf mobilen Geräten flüssig.
 
 
 
Häufige Anwendungsfälle
 
 
API-Datenabruf
 
Formular-Absenden-Feedback
 
Lazy Loading von Bildern
 
Seitenübergänge
 
Schaltflächen-Ladezustände
 
Inline-Inhaltsladung
 
 
Tipps & Best Practices
 
 
 Markenfarbe verwenden 
Die primäre Markenfarbe für den Loader verwenden, damit er zielgerichtet wirkt. Halbtransparente Varianten funktionieren gut für den Track bei Spinner und Bar.
 
 
 Geschwindigkeit 
Loader um 0,8–1,2s wirken natürlich. Schnellere Schleifen wirken unruhig; langsamere träge. Die erwartete Wartezeit berücksichtigen.
 
 
 Barrierefreiheit 
role="status" und aria-label="Wird geladen" zum Wrapper-Element hinzufügen, damit Screenreader den Ladezustand ankündigen.
 
 
 Reduzierte Bewegung 
@media (prefers-reduced-motion: reduce) respektieren — den Loader ausblenden oder durch einen statischen Indikator ersetzen.
 
 
 
Häufig gestellte Fragen
 
 
Welchen Loader-Typ sollte ich verwenden?
 
Spinner ist der universell bekannteste Ladeindikator. Dots eignet sich gut für Chat-Kontexte. Bar passt zu fortschrittsorientierten Aufgaben. Pulse ist ideal für Skeleton-Screens.
 
 
 
Kann ich die Loader-Farbe dynamisch ändern?
 
Ja. Die hartcodierte Farbe durch eine CSS-Custom-Property ersetzen: --loader-color: #6366f1; und im Loader-CSS referenzieren. Dann per JavaScript oder Cascade aktualisieren.
 
 
 
Funktionieren diese Loader in allen Browsern?
 
Ja. Sie verwenden Standard-CSS-Animationen und Transforms, die in allen modernen Browsern einschließlich mobiles Safari, Chrome, Firefox und Edge unterstützt werden.
 
 
 
Wie zentriere ich den Loader auf einer Seite?
 
Den Loader in einen Container mit display: flex; justify-content: center; align-items: center; min-height: 100vh; einbetten, um ihn horizontal und vertikal zu zentrieren.