Einfachen Spinner mit CSS erstellen

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: