Animierter Ladekreis
Ein eleganter Ladekreis mit CSS-Animation, der anzeigt, dass Inhalte geladen werden.
Demo
Code
HTML
CSS
JavaScript
<div class="spinner-container">
<div class="spinner"></div>
</div>
.spinner-container {
display: flex;
justify-content: center;
padding: 20px;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Erklärung
Dieser Ladekreis verwendet CSS-Animationen, um eine Drehbewegung zu erzeugen.
Die Animation wird durch folgende Elemente erreicht:
- Ein runder Div mit
border-radius: 50%
- Ein transparenter Rahmen mit einer farbigen Oberseite
- Eine Keyframe-Animation namens
spin
, die eine 360-Grad-Drehung durchführt animation: spin 1s ease-in-out infinite;
lässt den Spinner kontinuierlich rotieren
Verwendung
Verwende diesen Spinner, um Benutzern anzuzeigen, dass Daten geladen werden, z.B. bei AJAX-Anfragen oder während der Initialisierung von Inhalten.