LocalToolsSammlung offline nutzbarer Browser-Tools

Kategorie: Entwicklung

CSS-Ladespinner-Generator

Eigene IdeeTool fehlt?

Gestalte schlanke CSS-Ladeanzeigen lokal und kopiere den Code

Erzeuge reine CSS-Ladespinner mit Live-Vorschau. Stelle Größe, Farbe, Strichstärke und Geschwindigkeit ein und kopiere die HTML- und CSS-Snippets. Ohne JavaScript und ohne Bilder.

Vorschau

HTML
<span class="loader" role="status" aria-label="Wird geladen…"></span>
CSS
.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Jedes Snippet animiert nur transform und opacity und endet mit einem prefers-reduced-motion-Block, damit die Animation für alle stoppt, die ihr System auf reduzierte Bewegung gestellt haben.

Kein JavaScript, keine Bilder, keine Webfonts – und nichts verlässt deinen Browser.

Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.

Wozu dieses Werkzeug dient

Eine Ladeanzeige ist eine der wenigen Stellen, an denen ein paar Zeilen CSS eine Bibliothek klar schlagen: kein Skript zu laden, kein Bild anzufordern, nichts zu initialisieren, bevor das kommt, worauf du wartest. Diese fünf Vorlagen – Ring, Doppelring, Punkte, Balken und Puls – animieren nur `transform` und `opacity`, sodass der Browser sie auf dem Compositor laufen lassen kann, statt bei jedem Frame das Layout neu zu berechnen. Jedes Snippet endet mit einem `prefers-reduced-motion`-Block, denn ein Spinner ist Dekoration, und wer sein System gebeten hat, Bewegung zu reduzieren, soll ihm nicht zusehen müssen. Das Markup ist ein `<span role="status">` mit Beschriftung, damit ein Screenreader das Warten ansagt statt eine leere Box zu finden.

So funktioniert es

  1. Wähle eine Vorlage und stelle Größe, Strichstärke, Geschwindigkeit und Farben ein.
  2. Benenne die Klasse um, falls sie mit deinem Stylesheet kollidieren könnte.
  3. Kopiere HTML und CSS in dein Projekt.

Datenschutz

Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.

Häufig gestellte Fragen

Sind die Spinner reines CSS?
Ja. Jeder ist ein span (mit ein paar leeren Kind-Spans bei den Vorlagen Punkte und Balken) plus eine CSS-Animation. Kein JavaScript, kein SVG, kein Bild, kein Webfont.
Brauche ich JavaScript, damit sie laufen?
Nein. Die Animation startet, sobald das Element im Dokument ist. Code brauchst du nur, um zu entscheiden, wann angezeigt und wann ausgeblendet wird.
Kann ich Geschwindigkeit und Farbe ändern?
Ja – Größe, Strichstärke, Animationsdauer, Hauptfarbe und Schienenfarbe sind hier alle Regler und landen direkt im Snippet, das du kopierst.
Was ist mit Besuchern, die weniger Bewegung wollen?
Jedes erzeugte Snippet endet mit einer prefers-reduced-motion-Media-Query, die die Animation praktisch anhält: Die Anzeige erscheint weiterhin, dreht sich aber nicht für Menschen, die Bewegung systemweit reduziert haben.
Wird der Code lokal erzeugt?
Ja. Einstellungen, Vorschau und erzeugte Snippets bleiben in deinem Browser; nichts wird hochgeladen.

Zurück zu allen Werkzeugen