Pure CSS Loading-Spinner

Ein moderner Loading-Spinner, der komplett ohne Bilder oder JavaScript auskommt und ausschließlich mit CSS umgesetzt wurde. Durch die geschickte Kombination von conic-gradient und mask (bzw. -webkit-mask) entsteht eine elegante Animation, die einen fließenden Rotationsverlauf darstellt.

Vorschau

Code

Kopieren Sie einfach den folgenden Code in die HTML- und CSS-Dateien Ihres Projekts, um den Spinner nahtlos einzubinden.

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* Masken-Einstellung zum Ausschneiden des inneren Bereichs */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

Erläuterung

• conic-gradient: Erzeugt einen Farbverlauf, bei dem die Farben entlang des Kreisumfangs um einen Mittelpunkt rotieren. Bei diesem Spinner entsteht durch den nahtlosen Übergang von völliger Transparenz (rgba(99, 102, 241, 0)) hin zu voller Deckkraft (rgba(99, 102, 241, 1)) die optische Illusion einer rotierenden Spur.
• mask / -webkit-mask: Verwendet einen radial-gradient als Maske, um den inneren Bereich des Elements transparent zu stanzen. Mit calc(100% - 6px) lässt sich die Linienstärke des Spinners (in diesem Beispiel 6px) präzise anpassen.
• animation: Definiert @keyframes mit transform: rotate(360deg) und sorgt durch die Eigenschaft linear für eine endlose, gleichmäßige Rotation.