CSS Loader Generator
Erstellen Sie sofort reine CSS-Ladeanimationen. Wählen Sie Spinner, Punkte, Balken oder Puls — kopieren Sie CSS und HTML und fügen Sie sie in jedes Projekt ein.
① Loader-Typ wählen ② Größe, Farbe und Geschwindigkeit anpassen ③ CSS und HTML kopieren
Farbe
#C9B89A
Geschwindigkeit
So funktioniert es
Jeder Loader wird nur mit CSS-Animationen erstellt — kein JavaScript, keine Bilder. Der Spinner verwendet Border-Rotation, Punkte verwenden Scale-Bounce, Balken verwenden scaleY, und Puls verwendet Scale mit Opacity.
Geschwindigkeitssteuerung
Langsam = 1,5s, Normal = 0,8s, Schnell = 0,4s Animationsdauer. Punkte und Balken verwenden animation-delay auf Kindelementen für den gestaffelten Effekt.
Sofort einsatzbereit
Kopieren Sie CSS und HTML-Schnipsel, fügen Sie sie in Ihr Projekt ein und der Loader funktioniert sofort. Keine Abhängigkeiten, keine Frameworks erforderlich.
CSS-Ausgabe
.loader {
width: 48px;
height: 48px;
border: 6px solid #c9b89a33;
border-top-color: #c9b89a;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
HTML-Ausgabe<div class="loader"></div>
Was ist eine CSS-Ladeanimation?
Eine CSS-Ladeanimation — auch CSS-Spinner oder CSS-Loader genannt — ist ein UI-Muster, das ausstehende Daten ohne JavaScript oder GIF-Bilder anzeigt. Modernes CSS ermöglicht komplexe Animationen mit @keyframes und den Eigenschaften transform, opacity und border. Gängige Muster sind Spinner (rotierende Border), Punkte (hüpfende Kreise), Balken (skalierte Rechtecke) und Puls (atmender Kreis).
Häufig gestellte Fragen
Ein CSS-Loader ist ein rein visueller Ladeindikator, der mit CSS-Animationen und @keyframes implementiert wird — kein JavaScript oder Bild-Assets erforderlich. Er signalisiert Benutzern, dass Inhalte geladen werden.
Der Spinner verwendet ein kreisförmiges Element mit einer transparenten Border, außer für eine farbige Seite. Eine @keyframes-Animation rotate(360deg) dreht das Element kontinuierlich.
Der Punkte-Loader zeigt drei Kreise, die mit der Transformation scale() nacheinander skaliert werden, was einen Hüpfeffekt erzeugt. Der Balken-Loader zeigt vier Rechtecke, die vertikal mit scaleY() skaliert werden.
Bei Punkten und Balken hat jedes Kindelement einen anderen animation-delay-Wert. Das bedeutet, jedes Element startet seinen Animationszyklus zu einem anderen Zeitpunkt, was das kaskadenartige Erscheinungsbild erzeugt.
CSS-Animationen mit transform und opacity sind in allen modernen Browsern GPU-beschleunigt. Vermeiden Sie die Animation von Eigenschaften wie width, height, die Layout-Reflow auslösen.
Umschließen Sie den Loader mit einem Container mit display:flex; justify-content:center; align-items:center; Für ein ganzseitiges Overlay fügen Sie position:fixed; inset:0 hinzu.
CSS @keyframes-Animationen werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge) seit 2013 unterstützt.