CSS-Loader-Generator
Erstellen Sie CSS-Ladeanimationen.
<div class="loader"></div>.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #D94F30;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Generator für reine CSS-Ladeanimationen
Ladeanimationen (Loader oder Spinner) sind wesentliche visuelle Elemente in jeder modernen Webanwendung. Sie zeigen dem Benutzer an, dass das System eine Anfrage verarbeitet, und verbessern die Benutzererfahrung durch visuelles Feedback während der Wartezeiten. Reine CSS-Loader sind besonders vorteilhaft, da sie kein JavaScript, keine Bilder und keine externen Bibliotheken benötigen, was sie extrem leichtgewichtig und schnell ladend macht.
Unser Generator enthält acht verschiedene Loader-Typen: klassischer Spinner, springende Punkte, Equalizer-Balken, expandierender Puls, Doppelbounce, rotierender Ring, 3D-Quadrat und konzentrische Wellen. Jeder kann durch Anpassung der Farbe (jeder Hexadezimalwert), der Größe (16 bis 80 Pixel) und der Animationsgeschwindigkeit (0,3 bis 3 Sekunden pro Zyklus) personalisiert werden.
Der generierte Code ist reines CSS mit @keyframes-Animationen, ohne externe Abhängigkeiten. Sie können sowohl HTML als auch CSS separat oder zusammen kopieren und direkt in Ihr Projekt einfügen. Die Loader sind vollständig responsiv und sehen auf jedem Gerät und jeder Bildschirmauflösung gut aus.
Häufig gestellte Fragen
Verwenden die Loader JavaScript?
Nein, alle Loader sind 100% reines CSS unter Verwendung von @keyframes-Animationen. Sie benötigen kein JavaScript, was sie extrem effizient und einfach in jedem Webprojekt implementierbar macht.
Sind sie mit allen Browsern kompatibel?
Ja, CSS @keyframes-Animationen und die verwendeten Eigenschaften sind mit allen modernen Browsern kompatibel, einschließlich Chrome, Firefox, Safari, Edge und Opera. Für aktuelle Browser werden keine Vendor-Präfixe benötigt.
Kann ich mehrere Loader auf derselben Seite verwenden?
Ja, aber stellen Sie sicher, dass Sie die Klasse '.loader' für jede unterschiedliche Instanz umbenennen (z.B. '.spinner-1', '.spinner-2'), um Stilkonflikte zwischen verschiedenen Loader-Typen zu vermeiden.