Einfachen Spinner mit CSS erstellen
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: