CSS-Loader-/Spinner-Generator

Wählen Sie einen Loader-Stil (Kreis, Punkte, Balken, Pulsieren), passen Sie Farbe, Größe und Geschwindigkeit an und kopieren Sie anschließend den erzeugten HTML- und CSS-Code. Keine Bilder, nur reines CSS, das in Ihrem Browser erzeugt und als Vorschau angezeigt wird.

Loader-Stil

Farbe

Größe: 48px

Geschwindigkeit: 1s

HTML- + CSS-Code

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="byteryo-spinner"></div>

So funktioniert es

Ein animierter Loader aus reinem CSS ist viel leichter als ein GIF und passt sich automatisch an Farbe und Theme Ihrer Oberfläche an. Jeder hier angebotene Stil beruht auf einer eigenen CSS-Animation (@keyframes): eine kontinuierliche Rotation beim Kreis, ein zeitlicher Versatz zwischen mehreren Elementen bei Punkten und Balken sowie eine Änderung von Skalierung und Deckkraft beim Pulsieren.

Funktioniert der erzeugte Code ohne JavaScript?

Ja, die Animation wird vollständig von CSS über @keyframes gesteuert: Kopieren Sie einfach den <style>-Block und das zugehörige HTML in Ihre Seite – für den Loader ist kein Skript nötig.

Wie zeige ich den Loader nur während eines Ladevorgangs an?

Fügen Sie den HTML-Block des Loaders mit Ihrem gewohnten JavaScript-Framework dynamisch hinzu oder entfernen Sie ihn (oder schalten Sie eine Klasse mit display: none um), solange eine Anfrage oder Verarbeitung läuft, und blenden Sie ihn aus, sobald der Inhalt bereit ist.

Der Code wird sofort in Ihrem Browser aus Ihren Einstellungen erzeugt, ohne Verbindung zu einem Server.