CSS-Spinner für Buttons Generator

Ein Beispiel

Angenommen, Sie haben einen dunkelblauen Button „Speichern“ mit weißem Text. Geben Sie im Generator die Größe 16, die Dicke 2, die Farbe #ffffff und die Geschwindigkeit 0.8 ein. Das Tool erzeugt:

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Die Spur des Rings ist ein fest eingestelltes helles Grau, das auf einem dunklen Button gut zu sehen ist. Wenn Sie eine dezentere Spur möchten, ersetzen Sie #eee im eingefügten CSS durch einen transparenten Wert wie rgba(255, 255, 255, 0.3). Die Bogenfarbe bleibt die, die Sie gewählt haben.

Im Button platzieren

Setzen Sie das Spinner-Element vor die Beschriftung und machen Sie den Button zu einer Flex-Zeile, damit beide mit einem Abstand auf einer Linie stehen:

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Wird gespeichert"></span>
  Wird gespeichert
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Fügen Sie den Spinner und den Zustand disabled nur hinzu, solange die Anfrage läuft. Entfernen Sie beides, wenn sie abgeschlossen ist. Das Deaktivieren des Buttons verhindert doppelte Absendungen, der Spinner erklärt dem Nutzer, warum.

Größe und Dicke für Buttons

Hinweise

• Der Generator erstellt einen einzelnen kreisförmigen Ring. Er erstellt keinen Button, Ihre Button-Styles bleiben also Ihre eigenen.
• Ein Ring, der dicker als ein Viertel seines Durchmessers ist, füllt sich aus und wirkt wie eine Scheibe. Halten Sie bei kleinen Größen die Werte dünn.
• Lassen Sie die Beschriftung neben dem Spinner stehen. Ein Spinner ohne Text kann für manche Nutzer schwer zu deuten sein.

Layoutsprünge vermeiden

Wenn der Spinner erscheint und der Button plötzlich breiter wird, verschiebt sich das Layout und der Klickbereich wandert. Zwei einfache Lösungen helfen. Geben Sie dem Button eine Mindestbreite, die Spinner und die längere Beschriftung bereits aufnimmt. Oder reservieren Sie den Platz für den Spinner von Anfang an, indem Sie vor der Beschriftung einen leeren Platzhalter von 16 px anzeigen. Da der generierte Ring eine feste Breite und Höhe in Pixeln hat, lässt sich genau der benötigte Platz leicht reservieren.