CSS-Loader-Generator

Was ist CSS-Loader-Generator?

Der CSS-Loader-Generator ist ein kostenloses Browser-Tool für Webdesigner und Frontend-Entwickler, die einen reinen CSS-Ladeindikator ohne eine zusätzliche Bibliothek benötigen. Wähle aus fünf Stilen - Spinner, Ring, Punkte, Balken und Puls - und steuere die Größe in Pixeln, die Hauptfarbe, die Geschwindigkeit eines Animationszyklus in Sekunden, die Strichstärke sowie die Anzahl der Punkte oder Balken. Eine Live-Vorschau animiert sich beim Bearbeiten, und das passende HTML-Markup samt einem CSS-Style-Block mit @keyframes wird sofort aktualisiert, sodass du es direkt in eine Seite einfügen kannst. Nutze es für Buttons, Seitenlader, Skeleton-Zustände und asynchrone Platzhalter oder um zu lernen, wie CSS-Animationen und @keyframes jeden Effekt antreiben.

So verwendest du CSS-Loader-Generator

1. Wähle einen Loader-Stil: Spinner, Ring, Punkte, Balken oder Puls.
2. Lege die Größe in Pixeln fest und wähle eine Farbe über das Farbfeld oder durch Eingabe eines Werts.
3. Stelle die Animationsgeschwindigkeit in Sekunden für einen vollständigen Zyklus ein.
4. Öffne die Einstellungen, um die Strichstärke (Spinner und Ring) oder die Anzahl der Punkte oder Balken anzupassen.
5. Beobachte die Animation in der Live-Vorschau und kopiere dann das erzeugte HTML und CSS mit der Kopier-Schaltfläche.

Beispiele

Stil: Spinner, Größe 48px, Farbe #4f86f7, Geschwindigkeit 1s, Stärke 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Stil: Punkte, Größe 48px, Farbe #9333ea, Geschwindigkeit 1s, Anzahl 3

<div class="dd-loader"><div></div><div></div><div></div></div> mit gestaffelter animation-delay, sodass die Punkte wellenförmig skalieren.

Häufig gestellte Fragen

Welche Loader-Stile sind verfügbar?

Fünf: Spinner (ein rotierender Bogen), Ring (ein dickerer rotierender Ring), Punkte (Punkte, die wellenförmig skalieren), Balken (Balken, die sich nach oben und unten strecken) und Puls (ein einzelner pulsierender Kreis). Wechsle über das Stilmenü, und Vorschau und Code aktualisieren sich sofort.

Was bewirken die Regler für Größe, Farbe und Geschwindigkeit?

Die Größe legt die Pixelmaße des Loaders fest, die Farbe bestimmt die Hauptfarbe (nutze die Farbauswahl oder gib eine beliebige CSS-Farbe ein), und die Geschwindigkeit ist die Dauer eines Animationszyklus in Sekunden. Die Stärke steuert den Strich für Spinner und Ring, während die Anzahl bestimmt, wie viele Punkte oder Balken erscheinen.

Ist das erzeugte CSS reines CSS ohne JavaScript?

Ja. Das Snippet besteht aus reinem HTML plus einem <style>-Block mit CSS-Animation und @keyframes, sodass es ohne JavaScript oder externe Bibliothek läuft. Füge es in deine Seite ein, und es funktioniert von allein.

Warum verändern Stärke und Anzahl nicht jeden Stil?

Die Stärke betrifft nur Spinner und Ring (die einen Rand zeichnen), während die Anzahl nur Punkte und Balken betrifft (die mehrere Elemente rendern). Die anderen Stile ignorieren sie, sodass die Ausgabe für den gewählten Stil sauber bleibt.

Wird etwas auf einen Server hochgeladen?

Nein. Der Loader und sein CSS werden vollständig in deinem Browser mit lokaler String-Berechnung erstellt - keine Einstellungen, Farben oder Codes werden je an einen Server gesendet, sodass es offline funktioniert und deine Arbeit privat bleibt.