CSS-Ladeanimation erstellen (Spinner)

So funktioniert es

Geben Sie links die Farbe der Ladeanimation ein; HEX wie #2F6FED, rgb(47, 111, 237) und hsl(220, 84%, 56%) werden erkannt, und die gewählte Farbe erscheint als Farbfeld unter der Ausgabe. Wählen Sie unter Animationsart eines von vier Mustern und geben Sie die Größe in Pixeln an; ein drehender Ring mit 48 Pixeln bekommt einen 6 Pixel breiten Rand und dreht sich alle 0,8 Sekunden einmal. Die ersten Zeilen des Codes enthalten das einzelne div für Ihre Seite: Dank role="status" und aria-label kündigen Screenreader es als „Wird geladen“ an. Fügen Sie das CSS darunter in Ihr Stylesheet ein; Klasse und @keyframes-Regel verweisen aufeinander, kopieren Sie beide zusammen. Am Ende steht ein @media-Block, der die Animation für Nutzer mit der Einstellung „Bewegung reduzieren“ auf ein Drittel verlangsamt. Das Werkzeug schreibt den Code, spielt ihn aber nicht ab; um die Animation zu sehen, öffnen Sie den Code in Ihrer eigenen Seite oder in einem Online-Code-Editor.

Dieses Werkzeug ist auch als css ladeanimation, css spinner erstellen, css loader generator, lade animation css, ladekreis css bekannt.

Was ist @keyframes?

@keyframes ist die CSS-Regel, die die Phasen einer Animation im Zeitverlauf festlegt. Darin stehen Zwischenpunkte in Prozent oder mit from und to, und zu jedem Punkt wird angegeben, wie das Element aussieht: bei 0 % nicht gedreht, bei 100 % um 360 Grad gedreht. Die Bilder dazwischen berechnet der Browser selbst. Gestartet wird die Animation, indem das Element die Eigenschaft animation mit Regelname, Dauer und Wiederholungszahl erhält; in diesem Werkzeug läuft sie endlos.

Was ist prefers-reduced-motion?

prefers-reduced-motion ist die CSS-Medienabfrage, über die eine Seite erfährt, ob im Betriebssystem das Reduzieren von Bewegung eingeschaltet ist. Das Abschalten von Animationen unter Windows, „Bewegung reduzieren“ unter macOS und iOS sowie „Animationen entfernen“ unter Android setzen den Wert auf reduce. Die Seite sollte dann große und schnelle Bewegungen dämpfen oder weglassen; die Barrierefreiheitsrichtlinien WCAG empfehlen das.

Was ist der Unterschied zwischen einer CSS-Ladeanimation und einem GIF?

Ein Lade-GIF ist eine feste Bilddatei: Sie muss heruntergeladen werden, Farbe und Größe lassen sich nicht ändern, beim Vergrößern wird sie unscharf und transparente Ränder wirken auf dunklem Hintergrund ausgefranst. Eine CSS-Ladeanimation besteht aus ein paar Zeilen Code: Nichts wird zusätzlich geladen, Farbe und Größe ändern sich mit einer Zahl, sie bleibt auf jeder Bildschirmdichte scharf und kann die Einstellung „Bewegung reduzieren“ beachten. Das GIF hat nur einen Vorteil: Es funktioniert dort, wo CSS nicht hinkommt, etwa im Text einer E-Mail.

Warum ein einziges div und warum der Block für reduzierte Bewegung?

Eine Ladeanzeige wird auf einer Seite so oft eingefügt und entfernt wie kaum ein anderes Element. Fünf verschachtelte span-Elemente machen das HTML unübersichtlich und erhöhen die Fehlergefahr, wenn JavaScript sie ein- und ausblendet. Alle vier Muster hier kommen mit einem div aus: Der Ring entsteht aus einem Rahmen, die drei Punkte aus box-shadow, die Balken aus drei Hintergrundstreifen, der Puls aus einer Skalierung. Es werden keine Bilder, Schriften oder Bibliotheken geladen.

Manchen Menschen wird bei ständigem Drehen oder Hüpfen schwindlig oder übel. Sie schalten im Betriebssystem „Bewegung reduzieren“ ein, und der Browser meldet das der Seite als prefers-reduced-motion. Der Block am Ende des Codes hält die Animation nicht an, sondern verlangsamt sie auf ein Drittel: Man sieht weiterhin, dass geladen wird, nur ohne schnelle Bewegung.

Welches Muster passt wohin?

Der drehende Ring ist die bekannteste Ladeanzeige. Er passt in eine Schaltfläche, zum Absenden eines Formulars oder zum Nachladen eines Seitenbereichs und bleibt auch bei 16 bis 24 Pixeln gut erkennbar. Drei hüpfende Punkte bedeuten in Chat- und Nachrichtenoberflächen „das Gegenüber schreibt“; sie stehen nah an einer Textzeile und eignen sich für kurze Wartezeiten.

Balken erinnern an fortlaufende Vorgänge wie Audio, Musik oder Datenströme. Der Puls wirkt ruhig und passt zu einer Standortmarkierung auf einer Karte oder einer Live-Anzeige – überall dort, wo „hier passiert gerade etwas“ gemeint ist. Dauert das Warten länger als ein paar Sekunden, reicht kein Spinner: Nehmen Sie dann einen Fortschrittsbalken oder eine Skeleton-Ansicht.

Häufige Fragen

Wie erstelle ich eine Ladeanimation mit CSS?

Setzen Sie ein div in die Seite, geben Sie ihm per CSS Größe und Farbe, beschreiben Sie die Bewegung mit einer @keyframes-Regel und hängen Sie diese mit der Eigenschaft animation als Endlosschleife an. Dieses Werkzeug schreibt diesen Code für vier fertige Muster; Sie wählen nur Farbe und Größe und kopieren.

Wie blende ich die Ladeanzeige wieder aus?

Entfernen Sie das div nach Abschluss aus der Seite oder geben Sie ihm das Attribut hidden. Eine unsichtbare, aber weiterlaufende Animation beschäftigt den Prozessor unnötig; ein Element mit display: none wird nicht animiert.

Wie ändere ich die Geschwindigkeit?

In der Zeile animation steht die Dauer in Sekunden (etwa 0.8s). Eine kleinere Zahl macht die Animation schneller, eine größere langsamer. Ändern Sie die Dauer im Block für reduzierte Bewegung im selben Verhältnis.

Was sagt ein Screenreader zu dieser Ladeanzeige?

Durch role="status" und aria-label="Wird geladen" am div erkennt ein Screenreader das Element als Statusmeldung und liest die Beschriftung vor. Die Animation selbst ist rein visuell und wird nicht angesagt; passen Sie die Beschriftung an die Sprache Ihrer Seite an.