CSS-Loader-Generator

Was ist dieses Tool?

Ein CSS-Loader ist ein kleines animiertes Element – ein sich drehender Ring, hüpfende Punkte, ein pulsierender Kreis oder ein sich bewegender Fortschrittsbalken – das anzeigt, dass Inhalte geladen werden, ohne JavaScript-Animationsschleife und ohne Bild oder GIF. Er besteht aus ein paar CSS-Regeln plus einem @keyframes-Block, der definiert, wie sich das Element über die Zeit bewegt.

Dieses Tool erzeugt vier gängige Loader-Muster mit echtem, funktionierendem CSS: einen drehenden, randbasierten Spinner, drei nacheinander hüpfende Punkte, einen ein- und auspulsenden Kreis sowie einen Balken mit gleitender Füllung. Passe Größe, Farbe und Dauer in der Live-Vorschau an und kopiere anschließend das generierte CSS sowie das minimale HTML-Element, auf das es sich bezieht.

Quelle: CSS Animations Level 1, W3C — die Spezifikation, die @keyframes und die Animationseigenschaften definiert, aus denen diese Loader aufgebaut sind.

Warum sollte man es nutzen?

• Live-Vorschau animiert in Echtzeit, wenn du Stil, Größe, Farbe oder Geschwindigkeit änderst – du siehst genau, was du am Ende einsetzt.
• Erzeugt das vollständige CSS inklusive @keyframes-Block, nicht nur ein Fragment, das du selbst fertigstellen musst.
• Gibt außerdem das exakte HTML-Markup aus, das das CSS erwartet – kein Rätselraten bei Klassennamen oder Elementstruktur.
• Vier unterschiedliche Animationsmuster (Spinner, Punkte, Puls, Balken) decken die häufigsten Anwendungsfälle für Ladezustände ab.
• Reine CSS-Animation – kein JavaScript, keine Bilddateien, kleiner und flüssiger als ein animiertes GIF.
• Läuft komplett im Browser, kostenlos, keine Anmeldung nötig.

Anleitung

1. Wähle einen Loader-Stil: Drehring, hüpfende Punkte, pulsierender Kreis oder Fortschrittsbalken.
2. Ziehe den Größenregler, um den Loader größer oder kleiner zu machen.
3. Wähle eine Farbe – sie wird zur Akzentfarbe des Loaders (der drehende Rand, die Punkte oder die Balkenfüllung).
4. Passe die Geschwindigkeit an, um die Animation schneller oder langsamer zu machen; die meisten UI-Loader wirken am besten zwischen 0,6s und 1,5s pro Zyklus.
5. Kopiere das generierte CSS in dein Stylesheet und füge den HTML-Ausschnitt dort ein, wo der Loader erscheinen soll.

Beispiel

Eingabe

Stil: Drehring · Größe: 40px · Farbe: Orange · Geschwindigkeit: 1,0s

Ausgabe

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Ein klassischer Ring-Spinner: ein Kreis mit einem fast transparenten Rand auf drei Seiten und einer Vollfarbe auf der vierten, der sich kontinuierlich mit einer linearen, endlosen Animation dreht.

Warum CSS-Loader statt animierter GIFs

Animierte GIF-Spinner waren jahrelang der Standard, aber ein CSS-Loader ist heute fast immer die bessere Wahl: Er besteht aus ein paar Hundert Byte Text statt einer Binärbilddatei, skaliert auf jede Größe ohne Pixelbildung, da er mit Rändern und Transforms gezeichnet wird, und seine Farbe lässt sich mit einem einzigen CSS-Wert sofort ändern, statt ein neues Bild exportieren zu müssen.

Die vier hier gezeigten Stile – Spinner, Punkte, Puls, Balken – sind zudem die, die in echten Interfaces am häufigsten vorkommen, vom Ladezustand im Button bis zum Vollbild-Overlay. Jeder animiert in seinen Keyframes nur transform und opacity, was Browser flüssig auf der GPU animieren können, ohne den Rest der Seite auszubremsen.

Den passenden Stil für die Situation wählen

• Drehring: die neutralste, universellste Wahl – funktioniert gut in Buttons und kleinen Inline-Ladezuständen.
• Hüpfende Punkte: wirkt leichter und verspielter; üblich bei Chat-„tippt gerade…“-Anzeigen und kurzen Wartezeiten.
• Pulsierender Kreis: gut für einen einzelnen Ladeindikator oder als „aktiv/live“-Statuspunkt.
• Fortschrittsbalken: vermittelt Fortschritt und wird bei Seitenladevorgängen oder mehrstufigen Prozessen oft erwartet, auch ohne exakte Prozentangabe.

Den Loader im eigenen Projekt einsetzen

Füge das generierte CSS einmal in dein Stylesheet ein und verwende den HTML-Ausschnitt anschließend überall dort, wo ein Ladezustand nötig ist – in einem Button während des Formularversands, über einer Karte während Daten geladen werden, oder zentriert in einem Vollbild-Overlay. Da die Animation reines CSS ist, reicht es zum Ein- und Ausschalten, das Element im DOM hinzuzufügen oder zu entfernen, oder es mit display: none auszublenden.

→ Box-Shadow-Generator · CSS-Minifizierer

Häufig gestellte Fragen