Einfacher CSS-Spinner Generator

Warum dieser Spinner einfach ist

Viele Loader verwenden mehrere verschachtelte Elemente, Hintergrundbilder oder ein Skript. Dieser hier ist ein einzelnes div, das als Kreis gestaltet ist. Der Ring besteht aus einem Rand, und nur der obere Teil des Randes hat eine andere Farbe. Dreht sich der Kreis, wandert dieser farbige Teil um die Kontur. Die ganze Technik beruht auf vier Ideen:

1. Ein quadratischer Kasten mit gleicher Breite und Höhe.
2. border-radius: 50%, um den Kasten in einen Kreis zu verwandeln.
3. Ein grauer Rand mit einer farbigen Seite über border-top-color.
4. Eine Drehanimation, die nie endet.

Der vollständige Code

.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); }
}

<div class="loader"></div>

Das ist der ganze Loader. Es gibt nichts herunterzuladen und keine Abhängigkeit, die aktuell gehalten werden muss.

Zentrieren

Der Ring ist ein normales Blockelement. Um ihn auf der Seite oder in einem Container zu zentrieren, ergänzen Sie margin: 0 auto; für .loader für die horizontale Zentrierung oder machen Sie das übergeordnete Element zu einem Flex-Container:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Was dieses Tool nicht leistet

• Es erstellt nur den Stil des Rings. Punktreihen, Balken und Pulsanimationen sind andere Designs.
• Die Spurfarbe ist fest auf Hellgrau eingestellt; ändern Sie sie im eingefügten CSS, wenn Ihr Hintergrund dunkel ist.
• Es ergänzt keine Barrierefreiheits-Attribute in Ihrem Markup. Setzen Sie role="status" und ein aria-label selbst auf das Element.

Kleine Anpassungen nach dem Kopieren

Da der Spinner nur wenige Eigenschaften hat, lässt er sich leicht anpassen. Für einen helleren Ring verringern Sie die Randbreite. Für eine ruhigere Wirkung erhöhen Sie die Animationsdauer. Um denselben Loader in zwei Größen zu verwenden, kopieren Sie die Klasse einmal und überschreiben nur width, height und border-width in einer zweiten Klasse. Der kurze Code ist der größte Vorteil eines einfachen Spinners: Sie können ihn auf einen Blick lesen und jeden Wert ändern, ohne in einer Bibliothek zu suchen.

Sie können die Spur auch einfärben, indem Sie #eee durch eine zu Ihrer Seite passende Farbe ersetzen. Der bewegte Bogen behält dabei die Farbe, die Sie im Generator gewählt haben.