Einfachen Spinner mit CSS erstellen

Danny
Created
Modified
Kommentar schreiben
HTML CSS Webdesign

Brauchte neulich bei einem Kundenprojekt ein Spinner, ohne extra ein GIF oder ähnliches hochladen zu müssen. Dank CSS3 ging das ganze sehr flott.

HTML:

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

CSS:

.loader {
    font-size: 10px;
    border: 1em solid rgba(218, 219, 223, 1);
    border-left: 1em solid rgba(58,142,194,0.9);
    animation: spin 1.2s infinite linear;
}
.loader, .loader:after {
    border-radius: 50%;
    width: 8em;
    height: 8em;
    display: block;
}

@keyframes spin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

Durch ändern der Werte von width/height kann der Duchmesser des Spinners angepasst werden.
Für das ändern der Ringstärke kann bei border/border-left der Wert 1em entsprechend angepasst werden.

Und so sieht das Ergebnis dann aus: