So nutzt du: CSS-Loader-Generator
- Klicke auf einen Loader in der Galerie — jede Kachel ist live.
- Passe Größe, Dicke, Tempo und Farben an; alle Kacheln aktualisieren sich gemeinsam.
- Benenne die CSS-Klasse um, falls sie mit deinem Projekt kollidiert.
- Kopiere das HTML und CSS (oder die React-Version) und füge es in deine Seite ein.
Warum ein reiner CSS-Loader?
Ein CSS-Spinner besteht aus wenigen hundert Bytes, braucht weder Bild-Request noch JavaScript, skaliert scharf auf jede Größe und lässt sich mit einer Variable umfärben. Jeder Loader hier basiert auf einem einzelnen Element (plus einigen spans für Punkte und Balken) und wird mit transform und opacity animiert. So läuft er flüssig, auch wenn der Hauptthread mit dem Laden deiner App beschäftigt ist.
Mit CSS-Variablen anpassen
Der generierte CSS-Code stellt --size, --color, --track, --thickness und --speed auf der Loader-Klasse bereit. So kannst du eine kleine weiße Variante für Buttons erstellen, ohne das CSS zu kopieren: <span class="loader" style="--size:18px;--color:#fff">.
Barrierefreiheit
- Der Loader hat
role="status"und ein visuell verstecktes „Lädt…“-Label, damit Screenreader ihn ansagen. - Bei aktivierter reduzierter Bewegung wird die Animation langsamer, statt zu stoppen — ein eingefrorener Spinner wirkt wie ein Absturz.
- Zeige einen Loader erst nach etwa 300 ms an; bei schnellen Anfragen wirkt ein kurz aufblitzender Loader langsamer als gar keiner.
Willst du eine eigene Ladeanimation? Baue sie im CSS-Animation-Generator und feile an der Easing-Kurve mit dem cubic-bezier-Generator.
Auch gesucht als: css loader, css spinner, loading spinner css, css spinner generator, ladeanimation css, reines css spinner, css preloader.
Passende Tools zu: CSS-Loader-Generator
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
- CSS Keyframes Generator — Ein visueller Editor für @keyframes.
- CSS Hover-Animation Generator — Gestalte Hover-Animationen für Buttons, Karten, Links und Icons.
Häufige Fragen
Kann ich diese Loader in kommerziellen Projekten verwenden?
Wie zeige ich den Loader nur an, solange etwas geladen wird?
hidden), sobald die Daten ankommen. In React rendere es bedingt: {loading && <Loader />}.Funktioniert er auch in einem Button?
style="--size:16px;--thickness:2px;--color:currentColor".