Toolipedia Einbetten
DE
← Alle Text-Tools

CSS-Loader-Generator

Spinner und Ladeanimationen in reinem CSS, mit Ihren Farben und Ihrer Größe.

  • Kostenlos
  • Ohne Anmeldung
  • Funktioniert auf jedem Gerät

Über CSS-Loader-Generator

Wählen Sie eine Animation wie Spinner, Punkte, Balken oder Puls, legen Sie Farbe und Größe fest und kopieren Sie das reine CSS. Es werden weder Bilder noch JavaScript benötigt, sodass der Ladeindikator selbst bei langsamen Verbindungen sofort erscheint. Fügen Sie eine Textbeschriftung oder das Attribut aria-busy hinzu, damit auch Nutzer von Screenreadern wissen, dass etwas lädt.

So verwenden Sie CSS-Loader-Generator

  1. Wähle einen Loader-Stil wie Spinner, Punkte oder Balken.
  2. Lege Farbe, Größe und Geschwindigkeit passend zu deiner Website fest.
  3. Kopiere das HTML und CSS und platziere es dort, wo Inhalt lädt.

Warum dieses Tool?

Auch bekannt als

Häufig gestellte Fragen

Ist ein CSS-Loader besser als ein GIF?

In der Regel ja. CSS-Loader sind winzig, skalieren auf jedem Bildschirm, wechseln die Farbe mit einer einzigen Variable und vermeiden eine zusätzliche Netzwerkanfrage, während ein GIF schwerer ist und auf Displays mit hoher Pixeldichte unscharf wirkt.

Wie blende ich den Loader aus, wenn die Seite bereit ist?

Gib dem Loader eine Klasse und entferne sie oder setze display none mit einem kleinen Skript, sobald dein Inhalt geladen ist. CSS allein kann nicht wissen, wann das Laden endet.

Kann ich den Loader auf dem Bildschirm zentrieren?

Setze ihn in einen Container mit position fixed und nutze Flexbox-Zentrierung, damit der Loader beim Laden des Inhalts mitten im Viewport sitzt.

Ist CSS-Loader-Generator kostenlos?

Ja. CSS-Loader-Generator auf Toolipedia ist kostenlos nutzbar, ohne Anmeldung und ohne Wasserzeichen.

Ist die Nutzung sicher?

Ja. Alles wird in Ihrem Browser berechnet, und nichts von Ihren Eingaben wird an unseren Server gesendet.

Funktioniert es auf meinem Smartphone?

Ja. Es funktioniert in jedem modernen Browser auf Android und iPhone sowie auf Tablets und Computern. Sie müssen nichts installieren.

Brauche ich ein Konto?

Nein. Öffnen Sie einfach die Seite und nutzen Sie das Tool. Keine Anmeldung, keine E-Mail-Adresse nötig.

Kann ich CSS-Loader-Generator auf meiner eigenen Website einsetzen?

Ja. Nutze unter dem Tool die Schaltfläche „Auf deiner Website einbetten“, um ein kurzes Stück Code zu kopieren und in deine Seite einzufügen. Es ist kostenlos, braucht kein Konto, und das Tool funktioniert weiter innerhalb deiner Seite.

Ähnliche Tools