CSS-Loader-Generator
Der CSS Loader Generator erstellt Ladeanimationen in reinem CSS in sechs Stilen – Spinner, hüpfende Punkte, Ring, Puls, Balken und Doppelring – mit einstellbarer Größe, Farbe, Geschwindigkeit und Stärke und gibt CSS und HTML aus.
Über dieses Tool
Der CSS Loader Generator erstellt Ladeanimationen in reinem CSS in sechs Stilen – Spinner, hüpfende Punkte, Ring, Puls, Balken und Doppelring – mit einstellbarer Größe, Farbe, Geschwindigkeit und Stärke und gibt CSS und HTML aus.
So funktioniert’s
- Wähle einen Loader-Stil.
- Passe Größe, Farbe, Geschwindigkeit und Stärke an.
- Sieh dir die Live-Vorschau an.
- Klicke auf „CSS + HTML kopieren“ und füge beides in deine Seite ein.
Gut zu wissen
- Loader in reinem CSS brauchen keine Bilder, GIFs oder JavaScript.
- Spinner drehen sich mit @keyframes und transform: rotate(), was sich effizient animieren lässt.
- Das Markup besteht aus einem einzigen Element bzw. einigen Kindelementen für Punkte und Balken.
- Füge role="status" und eine visuell versteckte Beschriftung wie „Wird geladen…“ hinzu, damit Screenreader den Loader ansagen.
- Überlege, Loader bei prefers-reduced-motion zu verlangsamen oder anzuhalten.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie erstelle ich einen Lade-Spinner in CSS?
Gib einem quadratischen Element einen Rahmen mit einer farbigen Seite, border-radius: 50% und eine rotierende @keyframes-Animation – oder kopiere einen aus diesem Generator.
Sind CSS-Loader besser als GIFs?
Meistens ja: Sie sind kleiner, bleiben in jeder Größe scharf, und Farbe und Geschwindigkeit lassen sich per CSS ändern.
Wie mache ich einen Loader barrierefrei?
Pack ihn in ein Element mit role="status" und füge versteckten Text wie „Wird geladen…“ hinzu, damit assistive Technologien ihn ansagen können.
Wie zentriere ich den Loader auf der Seite?
Platziere ihn in einem Container mit display: flex; justify-content: center; align-items: center;.