CSS-Ladeanimation-Generator

Eine kurze Geschichte der CSS-Animation, die deinen Spinner antreibt

Die @keyframes-Regel und die animation-Kurzform, die dieser Generator ausgibt, sind im CSS Animations Module Level 1 definiert. Der erste W3C Working Draft wurde am 20. März 2009 veröffentlicht und die Spezifikation erreichte schließlich die W3C-Empfehlung am 11. Dezember 2018, neun Jahre später. Bis dahin hatten alle ausgelieferten Browser die Syntax seit Jahren unterstützt: Safari 4 (Juni 2009) mit dem -webkit--Präfix, Firefox 5 (Juni 2011), Internet Explorer 10 (Oktober 2012), und unpräfigiert von Chrome 43 im April 2015. CSS Animations Module Level 2 ist der aktuelle Working Draft und fügt scrollgesteuerte Animationen über animation-timeline hinzu (geliefert in Chrome 115, Juli 2023; Safari und Firefox folgten Ende 2024). Die Rotation im «Spinner»-Preset kommt aus dem CSS Transforms Module Level 1, einer separaten Spezifikation in Candidate Recommendation seit Februar 2019 aber universell ausgeliefert: transform: rotate(360deg) bei 100% innerhalb eines @keyframes-Blocks ist das, was den Ring dreht.

Barrierefreiheit ist nicht optional: die «Bewegung reduzieren»-Präferenz

Jedes seit 2014 veröffentlichte Betriebssystem enthält eine «Bewegung reduzieren»-Barrierefreiheitseinstellung, macOS «Bewegungen reduzieren» (in Bedienungshilfen → Anzeige), iOS «Bewegungen reduzieren», Windows «Animationen anzeigen», Android «Animationen entfernen», GNOME «Animationen aktivieren» deaktiviert. Die Media Query prefers-reduced-motion (definiert in Media Queries Level 5, W3C First Public Working Draft November 2017) lässt dein CSS diese Präferenz erkennen und den Spinner stoppen. Wickle jeden Spinner immer ein in:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

Das WCAG 2.1 Erfolgskriterium 2.3.3 «Animationen aus Interaktionen» (Level AAA, W3C-Empfehlung 5. Juni 2018) verlangt, dass jede durch Interaktion ausgelöste Bewegungsanimation deaktiviert werden kann, es sei denn, die Bewegung ist essentiell. Ein Spinner ist selten essentiell. WCAG 2.2 (Oktober 2023) erbt dieselbe Regel.

Für Screenreader wickle den Spinner in <div role="status" aria-live="polite"> mit einem visuell verborgenen «Wird geladen…»-Text. Wenn das Laden abgeschlossen ist, ersetze den Inhalt; die Live-Region kündigt Hilfstechnologien «Geladen» an, ohne zu schreien. Setze aria-busy="true" auf die einschließende Region während des Ladens und aria-busy="false" danach. Dieses Muster ist im Kapitel Live-Regionen des W3C ARIA Authoring Practices Guide dokumentiert.

Warum CSS-Spinner bei 60 fps glatt bleiben

Moderne Browser-Rendering-Pipelines haben drei Stufen: Layout (Berechnung von Positionen), Paint (Füllen von Pixeln) und Composite (Kombinieren von Schichten auf der GPU). Die Eigenschaften transform und opacity sind die einzigen zwei, die Layout und Paint überspringen und rein auf dem Compositor-Thread laufen. Sie zu animieren ist im Wesentlichen kostenlos bei jeder Framerate. Animieren von width, height, top, left, margin oder allem, was das Box Model ändert, erzwingt einen vollständigen Layout-und-Paint-Durchlauf pro Frame und fällt auf Low-End-Geräten schnell unter 60 fps. Jeder Preset in diesem Generator animiert aus diesem Grund nur transform und opacity. Wenn du dem Browser einen Hinweis geben musst, befördert will-change: transform (definiert im CSS Will Change Module Level 1, W3C Candidate Recommendation 26. April 2022) das Element auf seine eigene Compositor-Schicht; sparsam verwenden, weil jede Schicht GPU-Speicher kostet.

Wann ein Spinner die richtige Antwort ist und wann nicht

In Response Times: The 3 Important Limits (1993, neu formuliert 2014) definierte Jakob Nielsen von der Nielsen Norman Group drei Wahrnehmungsschwellen: 0,1 Sekunde ist «sofort», 1 Sekunde ist die Grenze für ununterbrochenen Gedankenfluss, 10 Sekunden ist die Grenze für das Halten der Aufmerksamkeit des Benutzers. Ordne deine Loader-Strategie diesen zu:

• Unter 1 Sekunde: kein Indikator. Ein Spinner, der 300 ms blinkt, ist schlimmer als kein Spinner: das Auge registriert das Flackern als Bug.
• 1 bis 5 Sekunden: ein unbestimmter Spinner oder ein Barber-Pole-Balken. Sagt dem Benutzer «etwas passiert», ohne sich auf eine Dauer festzulegen.
• 5 bis 10 Sekunden: eine bestimmte <progress max="100" value="42"> mit Prozentsatz. Benutzer tolerieren ein langes Warten besser, wenn sie den Fortschritt sehen.
• SPA-Routennavigation: ein Skelett-Bildschirm (graue Platzhalterboxen, die das endgültige Layout nachahmen) fühlt sich schneller an als ein Spinner. Luke Wroblewski prägte den Begriff in seinem Beitrag vom März 2013 Mobile First Patterns; Facebooks «Shimmer» (2014) und Googles Material 2 (Mai 2018) machten ihn allgegenwärtig.

Easing-Funktionen und wie sich jede anfühlt

Die Eigenschaft animation-timing-function (und das CSS Easing Functions Module Level 1, Candidate Recommendation 6. Dezember 2022) wählt, wie der Wert zwischen Keyframes voranschreitet:

• linear, konstante Rate. Richtig für einen kontinuierlichen Spinner; falsch für alles, was in einen Endzustand abgebremst wird.
• ease, ease-in, ease-out, ease-in-out, Keyword-Aliasse für gebräuchliche kubische Bezier-Kurven. Browser-Standard ist ease.
• cubic-bezier(x1, y1, x2, y2), benutzerdefinierte Kurve mit vier Floats in [0, 1]. cubic-bezier(.25, .1, .25, 1) ist die Standard-«ease»-Kurve. Probiere cubic-bezier(.68, -.55, .27, 1.55) für einen «Overshoot»-Bounce-Effekt.
• steps(n, jump-end), diskrete Sprünge, ideal für einen Punkt-Loader, der den Zustand ohne Interpolation wechselt.

Häufige Fehler

• Einen Spinner ohne prefers-reduced-motion ausliefern. Benutzer mit vestibulären Störungen, Migräne-Triggern oder Aufmerksamkeitsempfindlichkeiten werden von jedem rotierenden Ring im Web getroffen. Die Korrektur sind zwei Zeilen CSS.
• role="status" und visuell verborgenen Text vergessen. Ein Spinner, der nur visuell dreht, sagt einem Screenreader-Benutzer nichts.
• Animationsgeschwindigkeit unter 0,5 Sekunden pro Zyklus. Ein Spinner, der in 0,3 s abschließt, fühlt sich hektisch an und wird von vielen Benutzern als «Fehler» gelesen. 1 bis 1,5 s pro Zyklus ist der angenehme Bereich.
• Layout-Eigenschaften animieren. Animieren von width, margin oder top verursacht Layout-Thrashing. Bleibe bei transform und opacity.
• Einen Spinner für jede Operation anzeigen. Wenn die Daten innerhalb von 100 ms ankommen, blinkt der Spinner und wird als Bug gelesen. Verzögere den Spinner um 200 bis 300 ms mit einem setTimeout, das du bei Erfolg löschst.
• Vergessen, den Spinner zu zentrieren. Ein `.spinner`, der oben links in einem Abschnitt schwebt, weil sein Container kein Flex/Grid-Container ist, ist der zweithäufigste visuelle Bug.

Weitere häufig gestellte Fragen

Funktionieren diese Spinner in alten Browsern?

Alle modernen Browser (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) unterstützen @keyframes und transform ohne jegliches Präfix. Internet Explorer 10 und 11 erfordern an einigen Stellen das -ms--Präfix, funktionieren aber ansonsten. IE 9 und früher haben keine CSS-Animationsunterstützung: greife auf ein animiertes GIF zurück oder verwende @supports (animation: spin 1s) zur Feature-Erkennung.

Wie stoppe ich den Spinner, wenn der Inhalt geladen ist?

Entweder entferne das Element aus dem DOM, verberge es mit display: none oder dem hidden-Attribut, oder pausiere die Animation mit animation-play-state: paused. Pausieren ist am günstigsten, wenn du es vielleicht wieder anzeigen möchtest. Wenn du das ARIA-Muster verwendet hast, setze auch aria-busy="false" auf den Container und ersetze den Ladetext durch die Ankündigung des geladenen Zustands.

Kann ich die Spinner-Farben weiter anpassen, als der Picker erlaubt?

Ja. Das ausgegebene CSS verwendet reguläre Hex- / RGB- / HSL-Werte; ersetze sie durch CSS-Variablen (var(--brand-primary)), damit der Spinner deinem Designsystem folgt. Für einen zweifarbigen Spinner bearbeite die border-color-Kurzform: border-color: var(--brand) transparent transparent transparent gibt das klassische «Ein-Viertel-Bogen»-Aussehen.

Warum nicht einfach eine SVG- oder Lottie-Animation verwenden?

CSS-Spinner wiegen unter 200 Byte, benötigen keine zusätzliche Anfrage, keine JavaScript-Laufzeit und werden vor jeglicher externer Ressourcenladung gerendert. SVG ist großartig für komplexe Formen; Lottie ist großartig für von Designern erstellte Animationen aus After Effects. Für einen generischen «etwas lädt»-Indikator ist CSS das günstigste Werkzeug, das die Arbeit korrekt erledigt.

Wird etwas verfolgt oder an einen Server gesendet?

Nein. Der Generator läuft vollständig im JavaScript deines Browsers. Deine Farbauswahlen, Größenanpassungen und kopiertes CSS verlassen niemals die Seite. Überprüfe im Netzwerk-Tab der DevTools.