CSS-Ladeanimationen erstellen

Von Bogdan Sandu (EN) · Veröffentlicht 9 Juni 2025 · Zuletzt aktualisiert 14 September 2026

Dieser CSS-Loader-Generator erstellt den CSS-Code für eine Ladeanimation, damit Sie die Keyframes nicht von Hand programmieren müssen. Wählen Sie einen Ladeindikator, passen Sie drei Einstellungen an und kopieren Sie das Ergebnis. Jeder Ladeindikator besteht aus reinem CSS: ohne JavaScript, Bilder oder Abhängigkeiten.

Was Sie einstellen können:

• Loader-Typ: Spinner, Punkte, Puls, Welle, Ring, Raster, Herz, Fortschrittsbalken, Shuriken, Balkenwelle, Hypnose oder Flipping-Quadrat
• Größe von 20px bis 100px
• Farbe aus einem Farbwähler, angewendet auf den beweglichen Teil des Laders
• Geschwindigkeit von 0,5x auf 2x, was die Animationsdauer teilt

Die Vorschau wird aktualisiert, wenn Sie die Schieberegler ziehen, und das Codefenster schreibt sich gleichzeitig neu. Jeder Loader animiert transform oder opacity, mit Ausnahme der Fortschrittsleiste, die background-position animiert.

So verwenden Sie diesen CSS-Loader-Generator

1. Wählen Sie einen Ladertyp aus der Dropdown-Liste und sehen Sie sich die Vorschau an.
2. Legen Sie die Größe fest und wählen Sie eine Farbe. Die Farbe wird je nach Lader auf den rotierenden Rahmen, die Punkte, die Balken oder die Füllung übertragen.
3. Ziehen Sie den Geschwindigkeitsregler. Werte über 1x verkürzen die Schleife, Werte unter 1x verlängern sie.
4. Klicken Sie auf Kopieren und fügen Sie das CSS in Ihr Stylesheet ein.
5. Fügen Sie ein Element mit der passenden Klasse dort hinzu, wo der Loader erscheinen soll. Der Klassenname lautet custom_loader_, gefolgt vom Typ.

Das HTML für elf der zwölf Loader ist ein einziges leeres Element:

<div class="custom_loader_spinner" role="status" aria-label="Loading"></div>

Bar Wave ist die Ausnahme. Sein CSS zielt auf fünf untergeordnete Elemente ab, daher benötigt es dieses Markup:

<div class="custom_loader_bar-wave" role="status" aria-label="Loading">
  <div></div><div></div><div></div><div></div><div></div>
</div>

Mit den Standardeinstellungen erzeugt der Spinner folgendes CSS:

.custom_loader_spinner {
  width: 40px;
  height: 40px;
  position: relative;
}

.custom_loader_spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: custom_spin 1s infinite linear;
}

@keyframes custom_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Die beiden Blöcke teilen sich absichtlich einen Selektor. Der erste legt die Box fest, der zweite legt das Aussehen fest, und Sie können sie zusammenführen, sobald der Code in Ihrem Projekt ist.

Was das Tool nicht macht

• Es kopiert nur CSS. Der obige HTML-Code befindet sich nicht im Code-Panel, also halten Sie diese Seite geöffnet oder notieren Sie sich den Klassennamen.
• Die Spurfarbe des Spinners und Rings und das Hellgrau in der Fortschrittsleiste sind auf #f3f3f3 festgelegt. Ändern Sie sie manuell für dunkle Hintergründe.
• Es gibt keine SCSS- oder Tailwind-Ausgabe und keinen GIF- oder SVG-Export.
• Es fügt keine Barrierefreiheitsattribute und keine Regel für reduzierte Bewegung hinzu. Fügen Sie role="status" wie oben gezeigt und eine Medienabfrage wie diese hinzu:

@media (prefers-reduced-motion: reduce) {
  .custom_loader_spinner {
    animation-duration: 3s;
  }
}

Durch Verlangsamung der Schleife bleibt das "still loading"-Signal erhalten, während der größte Teil der Bewegung entfernt wird. Die prefers-reduced-motion (EN) Abfrage wird in jedem aktuellen Browser unterstützt.

Was ist ein CSS-Loader-Generator?

Ein CSS-Loader-Generator ist ein browserbasiertes Werkzeug, das gebrauchsfertigen CSS-Animationscode für das Laden von Indikatoren erzeugt, ohne handgeschriebene Keyframes.

Die Ausgabe ist reines CSS (EN), keine Videodatei oder Bildsequenz, sodass nichts auf einem Server gerendert oder als separates Asset geladen werden muss.

Die meisten Werkzeuge funktionieren auch darunter auf die gleiche Weise. Sie wählen einen Stil aus, ziehen ein paar Schieberegler und eine Live-Vorschau aktualisiert sich in Echtzeit, während das Panel an der Seite den tatsächlichen Code schreibt.

• Was es ersetzt: manuelles Schreiben von @keyframes-Blöcken und manuelles Berechnen von Drehwinkeln oder Deckkraftschritten
• Was es nicht ist: eine JavaScript-Animationsbibliothek, ein vollständiges UI-Framework oder ein Videoplayer

Die Leute versuchen oft zuerst einen, optimieren die Werte und kopieren dann das endgültige Snippet direkt in ein Projekt.

Welche Arten von CSS-Loader-Animationen können Sie generieren?

Die meisten Generatoren sortieren ihre Ausgabe in sechs erkennbare Familien: Spinner, Punkte, Balken, Puls, Ring und Skelett.

Animationen gehören zu den am häufigsten verwendeten CSS-Funktionen. Loader sind einer der ersten Orte, an denen die meisten Entwickler nach ihnen greifen, denn ein Spinner ist eine kleine, in sich geschlossene Animation mit einer offensichtlichen Aufgabe.

Facebooks mobile App half dabei, Skelett-Bildschirme (EN) in den Mainstream zu drängen. Der leere weiße Raum im Newsfeed wurde durch graue Umrisse ersetzt, die wie der darunter liegende Inhalt geformt sind.

Spinner sind für die meisten Websites immer noch die Standardauswahl. Ein kurzer Blick auf eine beliebige Sammlung von CSS-Spinners (EN) zeigt, wie viel Abwechslung aus derselben Handvoll rotierender Formen entsteht. Die zwölf Loader auf dieser Seite decken die Familien Spinner, Dots, Bar, Pulse und Ring ab. Skelettbildschirme sind ein anderes Muster, das an Ihr Layout gebunden ist, sodass kein Generator sie generisch erzeugen kann.

Nur CSS, SVG und Hybrid-Rendering: Wie CSS-Loader-Generatoren Animationen erstellen

Hinter dieser Live-Vorschau stecken drei verschiedene Rendering-Pfade, und die meisten Generatoren sagen dir nie, welchen du bekommst. Dieser ist nur CSS-fähig.

Die CSS-only-Methode zeichnet eine Form mit Randradius oder Schatten und bewegt sie mithilfe von Transformation und Deckkraft. Es basiert auf der gleichen @keyframes (EN) Mechanik, die jede andere CSS-Animation antreibt.

Die SVG-basierte Methode zeichnet die Form zuerst als Vektorpfad und wendet dann Bewegung durch Strich-Strich-Array-Offsets oder einfache CSS-Transformationen an. Das ist es, was die Leute meinen, wenn sie über das Animieren einer SVG-Form (EN) anstelle eines div sprechen.

Hybrides Rendering kommt zum Einsatz, wenn ein Generator eine komplexe Form wie ein Logo oder Symbol verwendet, die Bewegung aber weiterhin über einfache CSS-Variablen gesteuert werden soll. So wird die eigene Animationssyntax von SVG vermieden.

Browser-Unterstützung für CSS-Loader-Animationen

Die Browser-Unterstützung ist schon seit Jahren kein echtes Hindernis mehr für diese Art von Animation.

CSS-Animationen werden laut caniuse.com (EN) im Internet Explorer seit Version 10, Firefox seit Version 16, Safari seit Version 9 und Chrome seit Version 43 ohne Präfix ausgeliefert. Frühere Versionen benötigten ein Herstellerpräfix.

Generatoren, die heute gebaut werden, geben selten Code mit Herstellerpräfix aus. Das Publikum, das immer noch einen Browser verwendet, der einen benötigt, ist jetzt ein Rundungsfehler, und dieses Tool lässt auch die Präfixe weg.

Welche Anpassungsmöglichkeiten bieten CSS-Loader-Generatoren?

Jeder Generator zeigt eine Handvoll der gleichen Kern-Wählscheiben, auch wenn die Schnittstelle von einem Werkzeug zum nächsten völlig anders aussieht. Dieser hat Größe, Farbe und Geschwindigkeit.

Größe: ein Pixel- oder rem-Wert, manchmal auf einen minimalen und maximalen Bereich gesperrt.

Color: normalerweise ein Hex-Picker, gelegentlich mit RGB- oder HSL-Eingabe nebeneinander.

Strichbreite: steuert, wie dick der Ring oder Balken aussieht, am relevantesten für SVG-basierte Stile.

Geschwindigkeit: wird direkt der Animationsdauer zugeordnet, typischerweise zwischen 0,6s und 2s.

Element count: wie viele Punkte, Balken oder Segmente den Lader ausmachen.

Größenkontrollen werden zunehmend auf „clamp()“ ausgeführt, sodass der Lader zwischen einem Boden und einer Decke skalieren kann, anstatt einen separaten Wert für Mobilgeräte zu erzwingen. Ein Klemmwertrechner macht das Rätselraten bei der Auswahl dieser beiden Endpunkte überflüssig. Der obige Generator gibt feste Pixelwerte aus, also tauschen Sie diese bei Bedarf gegen eine „clamp()“ aus.

Farbfelder erwarten normalerweise einen Hex-Code. Der Wechsel zwischen den Formaten bedeutet, dass der Hex-Wert in RGB umgewandelt wird, wenn ein Designsystem Farbmarken im anderen Format übergibt.

Die meisten Generatoren haben eine Obergrenze zwischen 16px und 200px und lehnen alles außerhalb dieses Bereichs ab, um zu verhindern, dass die Vorschau das Seitenlayout unterbricht. Hier ist der Bereich 20px bis 100px.

Welche Ausgabeformate bieten CSS Loader Generatoren an?

Drei Ausgabeformate decken fast jeden Generator auf dem Markt ab: Roh-CSS, SCSS und ein kombiniertes CSS-plus-HTML-Snippet. Dieses Tool erzeugt rohes CSS mit dem oben dokumentierten Markup.

Sowohl Bootstrap als auch Tailwind liefern ihren eigenen Quellcode als Sass oder einen Build-Schritt anstelle eines einzelnen flachen Stylesheets. Genau deshalb greifen Teams, die sich bereits in einem dieser Systeme befinden, eher zum SCSS-Export als zum Roh-CSS.

Egal welches Format herauskommt, der Produktionscode wird normalerweise vor dem Versand durch einen CSS-Minifier (EN) geführt, der Leerzeichen und Kommentare entfernt, die der Generator hinterlässt.

Umgekehrt macht das Einfügen des exportierten Codes in einen CSS-Verschönerer (EN) die Lesbarkeit erleichtert, wenn Sie entscheiden, was Sie behalten und was Sie zuschneiden möchten.

Generierte Klassennamen sind in der Regel kurz und allgemein (Spinner, Loader-Ring), daher benennen die meisten Leute sie um, bevor der Code jemals ein echtes Projekt erreicht. Es ist unwahrscheinlich, dass das hier verwendete Präfix custom_loader_ kollidiert. Benennen Sie es jedoch um, wenn Ihre Codebasis eine Namenskonvention hat.

Welche CSS-Loader-Generator Tools lohnt es sich zu verwenden?

Eine Handvoll Namen tauchen immer wieder auf, wenn man anfängt, Optionen zu vergleichen: Loading.io (EN), SpinKit (EN), Load Awesome (EN) und die integrierten Spinner in Bootstrap (EN) und Rückenwind (EN).

Dedizierte Generator-Tools:

• Vorteile: präzise Steuerung, Live-Vorschau, keine Abhängigkeit von einem Framework
• Nachteile: eine weitere externe Abhängigkeit zu verfolgen, Stile können mit bestehenden Namensgebungskonventionen kollidieren

Framework-Einbauten:

• Vorteile: keine zusätzliche Einrichtung, wenn das Framework bereits im Projekt ist, im Einklang mit dem Rest der Benutzeroberfläche
• Nachteile: weniger Animationsstile zur Auswahl, Anpassung wird durch die eigenen Variablen des Frameworks eingeschränkt

Die eigene README von SpinKit (EN) besagt, dass es hardwarebeschleunigte Transformations- und Deckkraftanimationen verwendet, die als einfaches npm-Paket ohne Build-Schritt vertrieben werden.

Dieses Detail ist wichtiger, als es aussieht. Tailwinds eingebautes Spinner-Dienstprogramm (EN) folgt der gleichen Zurückhaltung und hält sich an die Eigenschaften, die Browser bereits wissen, um effizient zu animieren.

Wie beeinflussen CSS-Loader die Seitenleistung?

Die ganze Aufgabe eines Laders besteht darin, eine Wartezeit zu glätten, sodass jemand, der stottert oder die Seite verschiebt, seinen eigenen Zweck zunichte macht.

Moderne Browser können nur zwei CSS-Eigenschaften billig animieren: Transform und Deckkraft. Alles andere, wie das Animieren der Breite oder des oberen Rands, zwingt den Browser zurück ins Layout und zeichnet auf jedem Frame.

• 60 FPS ist das Ziel der Framerate von Browsern, damit Animationen glatt aussehen, laut web.dev (EN)
• Jeder Frame erhält ein Budget von 16,7 Millisekunden, bevor Benutzer Verzögerungen wahrnehmen
• Transformation und Deckkraft sind die Eigenschaften, die der Composer (EN) animieren kann, ohne Layout oder Paint auszulösen.
• 81% der mobilen Seiten erreichen im Jahr 2025 einen guten kumulativen Layout-Shift-Wert, laut HTTP Archive Web Almanac (EN)

Lader, die ihren eigenen festen Platz reservieren (eine festgelegte Breite und Höhe auf dem Wrapper-Element), tragen überhaupt nicht zu dieser Layout-Verschiebungszahl bei. Diejenigen, die ohne Platzhalter erstellt wurden, sind normalerweise diejenigen, die dies tun. Jeder Loader legt hier eine explizite Breite und Höhe fest.

Skelett-Bildschirme haben einen kleinen Aufpreis, den die meisten Spinner nicht haben. Wenn Sie Verlaufs- oder Schimmeranimationen über ein ganzes Kartenraster wiederholen, werden mehr Elemente gleichzeitig animiert. Das summiert sich auf Low-End-Handys, auch wenn jede einzelne Animation billig ist.

Erfüllen CSS-Loader Barrierefreiheitsstandards?

Bei den meisten generierten Ladeprogrammen ist der Zugriff standardmäßig nicht möglich, nicht weil die Animation selbst das Problem darstellt.

Das fehlende Stück ist fast immer Markup. Ein rotierendes div ohne Rolle oder Beschriftung sagt einem Bildschirmleser nichts darüber aus, was auf der Seite passiert.

Die ARIA (EN)-Attribute, die hier wichtig sind, sind ausführlich dokumentiert. MDN listet die ariaBusy (EN)-Reflektionseigenschaft als Baseline weit verbreitet auf, und die status-Rolle (EN) ist der richtige Wrapper für einen Loader.

Bewegung selbst ist ein separates Thema von Markup. Die W3C Web Content Accessibility Guidelines enthalten Erfolgskriterium 2.3.3, Animation aus Interaktionen (EN). Es handelt sich um eine Level-AAA-Regel, die vorschreibt, dass durch Benutzerinteraktion ausgelöste Bewegungen deaktiviert werden können, es sei denn, sie sind für den Inhalt unerlässlich.

Diese Regel existiert, weil Bewegung für einen bedeutenden Teil der Nutzer einen realen physischen Preis hat. Forschung mit Daten der National Health and Nutrition Examination Survey (EN), veröffentlicht in den Archives of Internal Medicine, stellte eine vestibuläre Dysfunktion bei 35,4% der US-Erwachsenen im Alter von 40 Jahren und älter fest.

Die Berücksichtigung der Medienabfrage prefers-reduced-motion ist die praktische Lösung. Tauschen Sie eine sich drehende oder hüpfende Animation gegen eine einfache Deckkraftausblendung aus oder verlangsamen Sie sie ganz, wenn diese Einstellung festgelegt ist. Entfernen Sie den Lader nicht vollständig.

X (früher Twitter) zeigt bereits in seinen eigenen Einstellungen für die Barrierefreiheit einen Umschalter für die Bewegungsreduzierung an, unabhängig davon, was das Betriebssystem eingestellt hat. Das ist das gleiche Prinzip, das auf Produktebene angewendet wird.

SVG-basierte Lader brauchen noch eine Sache, die einfache CSS-Lader nicht brauchen. Ohne ein Aria-Hidden-Attribut oder eine Textalternative kann ein dekoratives SVG am Ende als eine bedeutungslose Zeichenfolge von Pfaddaten vorgelesen werden. Der Leitfaden zu zugänglichen SVG-Dateien (EN) behandelt die Korrektur.

Wie implementieren Sie einen generierten CSS-Loader auf einer Website?

Das Abrufen eines generierten Loader aus dem Export-Panel auf eine Live-Seite folgt derselben Reihenfolge, unabhängig davon, welches Tool den Code erstellt hat.

1. Kopieren Sie den CSS-Block in Ihr Stylesheet oder ein Scoped Style-Tag
2. Fügen Sie das passende HTML-Markup an der Stelle ein, an der der Loader erscheinen soll.
3. Fügen Sie die Barrierefreiheitsumhüllung (Rolle, aria-live, aria-busy) um sie herum hinzu
4. Blenden Sie den Loader standardmäßig mit display:none oder Visibility:hidden aus
5. Schalten Sie es direkt vor Beginn einer Anfrage ein und aus, sobald eine Antwort eintrifft

Dieser Umschaltschritt ist normalerweise mit einem Abrufaufruf oder einer Ajax (EN)-Anfrage verbunden. Ein Lader, der nichts zu warten hat, hat keinen Grund zu existieren.

Einen CSS-Loader in React- oder Vue-Projekte integrieren

Allein react-loader-spinner (EN) verzeichnete im September 2026 etwa 289.000 wöchentliche Downloads auf der npm-Registrierung. Das sagt viel darüber aus, wie oft Teams auf eine verpackte Komponente zurückgreifen, anstatt Roh-Markup von Hand zu kopieren.

Der React-Ansatz:

• Wrap das Loader-Markup in eine kleine Komponente, die einen Lade-Boolean als Prop akzeptiert
• Bedingt rendern Sie es mit dem gleichen Booleschen oder verwenden Sie eine Bibliothekskomponente wie MUIs CircularProgress (EN)
• Steuert die Sichtbarkeit von state set in einem useEffect um den fetch-Aufruf herum

Ansicht der Annäherung:

• Binden Sie die Sichtbarkeit des Wrappers mit v-if oder v-show an eine reaktive Referenz
• Flip that ref auf true vor einem asynchronen Aufruf und false im finally Block

Beide Frameworks benötigen JavaScript (EN) nicht, um die Animation selbst auszuführen, sondern nur, um zu entscheiden, wann der Lader auf dem Bildschirm erscheint.

Wann funktioniert ein CSS-Loader-Generator nicht?

Ein generierter Spinner ist das falsche Werkzeug, sobald eine Wartezeit nicht mehr kurz und vorhersehbar ist.

Jakob Nielsens (EN) Usability-Forschung setzt die Schwelle eindeutig. Wenn die Reaktionszeit 10 Sekunden überschreitet, zeigen Sie eine Prozent-Fertig-Anzeige anstelle eines unbestimmten Spinners, da ein Spinner die Aktivität bestätigt, aber nichts darüber sagt, wie viel noch übrig ist.

Jede Animation, die ein CSS-Loader-Generator erzeugt, ist designbedingt unbestimmt, einschließlich der Fortschrittsleiste oben. Keiner von ihnen berechnet einen echten Prozentsatz, weil der Generator keine Ahnung hat, wie lange Ihre tatsächliche Anfrage dauern wird.

• Lange Uploads, Exporte oder mehrstufige Jobs, bei denen der Benutzer wissen muss, wie viel noch übrig ist
• Sehr kurze Reaktionszeiten von weniger als 300 Millisekunden, wobei jeder Lader nur einen Bewegungsblitz hinzufügt, den der Benutzer kaum registriert
• Low-End-Geräte, die mehrere animierte Lader gleichzeitig ausführen, wobei jeder um die gleichen Composer-Ressourcen konkurriert
• Komponentenbibliotheken oder Konstruktionssysteme, die bereits ihren eigenen Ladezustand liefern. Das Einfügen von generiertem CSS erzeugt zwei widersprüchliche Wahrheitsquellen

Die Usability-Kosten dieses Missverhältnisses sind leise, aber real. Ein Spinner, der über den Punkt hinaus auf dem Bildschirm sitzt, an dem ein Benutzer eine Antwort erwartet hat, liest sich als festgefahrene Seite, nicht als Fortschritt.

Generatoren bauen auch keine Mindestanzeigedauer ein, sodass eine Anfrage, die fast sofort gelöst wird, dazu führt, dass der Lader blinkt und verschwindet. Teams mildern dies üblicherweise mit einem kurzen Deckkraftübergang statt mit einem harten Schnitt.

Häufige Fragen: CSS-Ladeanimationen erstellen

Was ist der Unterschied zwischen einem CSS Loader und einem CSS Spinner?

Ein CSS-Spinner ist ein spezieller Animationstyp, eine rotierende Form. Ein CSS-Loader ist der weiter gefasste Begriff, der Spinner, Punkte, Balken, Impulse und Skelett-Bildschirme umfasst.

Jeder Spinner ist ein Lader. Nicht jeder Lader ist ein Spinner.

Sollten Sie stattdessen einen CSS Loader oder eine Lottie Animation verwenden?

Lottie (EN) rendert JSON-basierte Vektoranimationen, die aus After Effects exportiert wurden und für komplexe, illustrierte Bewegungen entwickelt wurden.

Ein CSS-Loader bleibt leichter und einfacher, besser geeignet für einfache Spinner und Fortschrittsbalken. Greifen Sie zu Lottie, wenn die Animation Illustration benötigt, nicht nur Bewegung.

Ist ein CSS-Loader-Generator kostenlos zu benutzen?

Die meisten CSS-Loader-Generatoren, einschließlich dieses Tools, stellen die grundlegende CSS-Ausgabe kostenlos bereit. Kostenpflichtige Tarife betreffen meist Zusatzfunktionen wie den Export als GIF oder APNG, die Anpassung von Symbolen oder das Entfernen von Quellenangaben.

Open-Source-Bibliotheken wie SpinKit und Load Awesome tragen eine MIT-Lizenz ohne Kosten.

Welche Fehler machen Entwickler bei der Verwendung von CSS-Loadern?

Wenn Sie die Klassennamen eines Generators direkt in ein Projekt kopieren, ohne sie umzubenennen, kommt es zu Kollisionen mit vorhandenen Stilen.

Das Überspringen des aria-live-Wrappers ist üblich. Das gleiche gilt für das Laden mehrerer Spinner-Bibliotheken auf einer Seite, wodurch das CSS-Bundle aufgebläht wird.

Was sollten Sie zuerst überprüfen, wenn Sie einen CSS-Loader-Generator auswählen?

Ein CSS-Loader-Generator verdient seinen Platz in einem Projekt, sobald die exportierte Animation nur Transformation und Deckkraft verwendet, unter einer wiederverwendbaren Lizenz geliefert wird und vor dem Start den Accessibility Wrapper erhält.

Drei Prüfungen entscheiden, ob es eine echte Codebasis überlebt:

• Rendering-Methode: nur Transformation und Deckkraft
• Lizenz: MIT oder CC0 Bedingungen
• Barrierefreiheits-Wrapper: role, aria-live, aria-busy

SVG-basierte Exporte rendern komplexe Formen glatter als reine CSS-Exporte. Der Kompromiss ist zusätzliches Dateigewicht und Markup auf Strichebene, das die meisten Projekte nie wieder berühren.

Die WCAG listet die durch Interaktion ausgelöste Bewegungssteuerung als Stufe AAA auf, die optionalste Stufe, aber die vestibuläre Dysfunktion, vor der sie schützt, betrifft 35,4% der US-Erwachsenen über 40.

Alles, was über einen voreingestellten Spinner oder Balken hinausgeht, gehört in einen dedizierten Keyframe-Animationsgenerator, der für benutzerdefiniertes, mehrstufiges Timing entwickelt wurde.