Lade-Spinner CSS Generator

Was Sie erhalten

Der Generator schreibt zwei Regeln: eine Klasse .loader und einen Block @keyframes spin. Die Klasse zeichnet einen Kreis, gibt ihm einen hellgrauen Ring und färbt die obere Kante dieses Rings ein. Die Keyframes lassen den Kreis eine volle Umdrehung machen, und die Zeile animation wiederholt das endlos. Mehr wird nicht benötigt: keine Bilddatei, keine Icon-Schriftart und kein Skript.

Mit den Standardwerten (60 px, 6 px Ring, #10b981, 1 Sekunde) sieht die Ausgabe so aus:

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

In Ihre Seite einbauen

Fügen Sie das CSS in Ihr Stylesheet ein und setzen Sie dann ein leeres Element dorthin, wo der Loader erscheinen soll:

<div class="loader" role="status" aria-label="Wird geladen"></div>

Zeigen Sie das Element an, während die Arbeit läuft, und entfernen Sie es oder blenden Sie es mit display: none aus, sobald der Inhalt eintrifft. Die Attribute role und aria-label ermöglichen Screenreadern, den Status anzukündigen.

Größen, die funktionieren

Als Faustregel gilt eine Dicke von etwa einem Zehntel des Durchmessers. Deutlich dünner wirkt auf hochauflösenden Bildschirmen blass, deutlich dicker wird der Ring zu einem Klecks.

Wissenswertes

• Die Spurfarbe ist fest auf Hellgrau eingestellt (#eee). Bei einem dunklen Hintergrund ändern Sie diesen Wert im eingefügten CSS.
• Das Tool erstellt einen einzelnen kreisförmigen Spinner. Punkte, Balken und andere Formen brauchen anderes Markup.
• Falls in Ihrem Projekt bereits eine Klasse loader oder eine Animation spin existiert, benennen Sie sie im eingefügten CSS um, damit sich die Regeln nicht überschneiden.

Anzeigen und Ausblenden

Ein Lade-Spinner sollte erscheinen, wenn die Arbeit beginnt, und verschwinden, wenn sie endet. Ein einfaches Muster besteht darin, am Element ein Attribut hidden zu belassen und es zu entfernen, sobald eine Anfrage startet. Wenn die Wartezeit meist sehr kurz ist, fügen Sie vor dem Anzeigen des Rings eine kleine Verzögerung von einigen hundert Millisekunden hinzu, damit schnelle Antworten keinen Spinner aufblitzen lassen. Blenden Sie den Spinner in jedem Fall auch im Fehlerfall aus, sonst warten Besucher auf etwas, das bereits fehlgeschlagen ist.