CSS Loader-Generator

CSS-Ladeanimationen bauen auf zwei Grundbausteinen auf: einer Form aus Rändern, Transformationen oder box-shadow und einer @keyframes-Regel, die sie in einer Schleife bewegt. Dieses Tool enthält sechs Loader-Stile, jeder mit einer anderen Technik. Ring und Doppelring nutzen den Rand-Trick: Ein Teil des Kreisrands wird anders eingefärbt und mit rotate gedreht. Punkte und Balken versetzen dieselbe Animation über mehrere Elemente hinweg mit animation-delay, sodass jedes Teil einen Takt hinter dem vorherigen liegt. Puls skaliert und verblasst einen einzelnen Kreis, und Welle lässt einen Ring nach außen wachsen, während seine Deckkraft auf null sinkt, derselbe Effekt wie bei radarartigen Ladeanzeigen.

Wähle einen Stil und passe dann Größe, Farbe, Dicke und Geschwindigkeit mit den Reglern unter der Vorschau an. Die Größe verändert die Gesamtabmessungen der Form, die Dicke steuert die Randbreite bei den ringbasierten Stilen, die Farbe aktualisiert alle Elemente der Animation gleichzeitig, und die Geschwindigkeit legt fest, wie viele Sekunden ein Durchlauf dauert, von schnell und energiegeladen bis langsam und ruhig. Der Vorschau-Hintergrund-Umschalter zeigt, wie der Loader auf weißen, grauen und dunklen Flächen wirkt, bevor du dich für eine Farbe entscheidest, da ein hell gefärbter Ring auf einem blassen Hintergrund an Kontrast verlieren kann.

Sobald es passt, kopiere den CSS-Block mit den Keyframes und der Klassenregel sowie das kleine HTML-Snippet, das zum Anzeigen nötig ist. Nichts wird hochgeladen; der Loader wird vollständig in deinem Browser erzeugt und dargestellt.