Tokenlabor

CSS-Loader-Generator

Der CSS-Loader-Generator erzeugt Spinner, Punkte, Balken und Ladebalken aus reinem CSS, mit Vorschau, Screenreader-Text und Regel für prefers-reduced-motion.

HTML
CSS

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Ladeanimationen mit CSS, barrierefrei

Der CSS-Loader-Generator erzeugt eine Ladeanimation aus reinem CSS: einen CSS Spinner als Ring oder Doppelring, drei pulsierende Punkte, Balken, einen Puls oder einen Fortschrittsbalken ohne bekannte Dauer. Sie wählen Größe, Strichstärke, Farbe und Geschwindigkeit, sehen die Loading-Animation sofort und kopieren HTML und CSS. Es braucht weder Bilder noch JavaScript; die Animation läuft über @keyframes mit transform und opacity, die der Browser besonders effizient berechnet.

Eine CSS-Ladeanimation muss auch ohne Bild verständlich sein. Der erzeugte Code setzt deshalb role="status" und einen nur für Screenreader sichtbaren Text wie „Wird geladen …“, der beim Erscheinen vorgelesen wird. Für Menschen, die in ihrem Betriebssystem reduzierte Bewegung eingestellt haben, enthält das CSS eine Regel mit @media (prefers-reduced-motion: reduce): Je nach Wahl läuft die Animation deutlich langsamer, oder sie stoppt und der Text wird sichtbar. Ganz entfernen sollte man die Ladeanzeige nicht, denn sie zeigt, dass etwas passiert.

Klassennamen und Keyframes erhalten ein eigenes Präfix, damit sie nicht mit vorhandenem CSS kollidieren. Wenn Sie den Ablauf feiner steuern wollen, passen Sie die Zeitfunktion mit dem Cubic-Bezier-Generator an; weitere Bewegungen baut der CSS-Animation-Generator.

Anleitung: CSS-Loader-Generator in 4 Schritten

  1. Unter „Art“ eine Ladeanimation wählen: Ring, Doppelring, Punkte, Balken, Puls oder Fortschrittsbalken.
  2. Größe, Strichstärke, Farbe und Dauer einstellen und die Vorschau beobachten.
  3. Bei „Reduzierte Bewegung“ festlegen, ob die Animation verlangsamt oder angehalten wird.
  4. Den Präfix für Klassennamen eintragen und HTML sowie CSS kopieren.

Typische Anwendungsfälle

  • Einen leichten Spinner für fetch-Anfragen ohne zusätzliche Bibliothek einbauen.
  • Einen Platzhalter für Buttons mit Ladezustand gestalten, etwa beim Absenden eines Formulars.
  • Einen Fortschrittsbalken ohne bekannte Dauer für Uploads oder Exporte anzeigen.
  • Bestehende GIF-Spinner durch skalierbares CSS in Markenfarbe ersetzen.
Fragen

Häufige Fragen

Wie mache ich einen Spinner barrierefrei?

Geben Sie dem Container role="status" und einen Text, der nur für Screenreader sichtbar ist, etwa „Wird geladen …“. Wenn das Laden fertig ist, entfernen Sie den Spinner oder ersetzen den Text durch das Ergebnis.

Was macht prefers-reduced-motion?

Die Media Query greift, wenn Nutzer im Betriebssystem Bewegungen reduziert haben, etwa wegen Schwindel oder Migräne. Animationen sollten dann deutlich ruhiger laufen oder ganz stehen.

Warum ruckelt mein Spinner?

Meist, weil Eigenschaften wie width, top oder margin animiert werden, die ein neues Layout auslösen. Der Generator animiert nur transform und opacity, die ohne Layout neu berechnet werden.

Kann ich den Loader in einem Button verwenden?

Ja. Wählen Sie eine kleine Größe wie 16 px und die Textfarbe des Buttons. Setzen Sie am Button zusätzlich aria-busy="true" und deaktivieren Sie ihn, solange geladen wird.

Wann sollte ein Spinner erst erscheinen?

Bei kurzen Wartezeiten wirkt ein sofort aufblitzender Spinner unruhig. Üblich ist, ihn erst nach einer kleinen Verzögerung von einigen hundert Millisekunden einzublenden, etwa per animation-delay oder setTimeout.

Ist ein CSS-Spinner schneller als ein GIF?

Er lädt keine Bilddatei, skaliert ohne Unschärfe und lässt sich per CSS umfärben. Animationen mit transform und opacity berechnet der Browser meist auf der Grafikkarte, sie belasten den Hauptthread kaum.

Weitere Werkzeuge

Das könnte auch helfen

Alle 558 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen