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.