CSS-Laden-Animation-Generator
Führung
CSS-Laden-Animation-Generator
Erstelle acht beliebte CSS-Ladeanimationen – drehender Ring, doppelter Ring, Puls-Dot, Springende Dot, Springender Ball, Gleichmäßige Balken, Pulsierender Kreis und Typing-Indikator. Passiere Farbe, Größe, Stroktiefe und Dauer; beobachte die Live-Vorschau sofort; kopiere den @keyframes-Code und minimalen HTML-Teil in dein Projekt. Kein JavaScript, kein SVG, keine externen Abhängigkeiten.
Nutzung
- Wähle eine Animation aus dem Dropdown-Menü.
- Setze die Größe des Laders in Pixeln und passe die Stroktiefe für Ring-basierte Typen an.
- Wähle eine Hauptschichtfarbe und eine Track-/Sekundärfarbe.
- Stelle die Dauer (in Sekunden) für einen vollständigen Zyklus ein.
- Wähle ein Ausgabeformat – HTML + CSS kombiniert, CSS allein oder HTML allein.
- Legen Sie optional eine benutzerdefinierte ARIA-Bezeichnung für Screen-Reader fest.
- Kopiere den generierten Snippet oder lade ihn als Datei herunter.
Funktionen
- Acht Animationstypen – decken die häufigsten Lademuster in modernen UIs ab.
- Live-Vorschau – Jede Änderung wird sofort neu gerendert, damit du Timing und Flüssigkeit vor der Kopie überprüfen kannst.
- Reiner CSS-Ausgabe – Keine JavaScript-Ausführungskosten und kein SVG-Code zu warten.
- Geschlossene Klasse-Namen – Jeder generierte Snippet verwendet einen einzigartigen Vorgang, damit mehrere Ladezeichen ohne Kollision koexistieren können.
- Standardmäßig zugänglich – Jeder Lader enthält die Rolle „status“ und eine konfigurierbare aria-label.
- Drei Ausgabemodi – kombinierte HTML + CSS, CSS allein oder HTML allein, je nachdem, wie du es integrierst.
Häufig gestellte Fragen
-
Was macht @keyframes in CSS?
Die @keyframes-Regel definiert die Zwischenschritte einer CSS-Animation. Jeder Schritt (0%, 50%, 100% usw.) beschreibt die Stile, die ein Element an diesem Zeitpunkt des Animationzyklus haben sollte. Der Browser interpoliert zwischen den Schritten, um eine glatte Bewegung zu erzeugen. Ohne @keyframes hat die Animationseigenschaft nichts zu spielen.
-
Warum werden CSS-Animationen statt SVG oder JavaScript für Ladezeichen verwendet?
CSS-Animationen laufen auf dem Browser-Compositor-Thread, wodurch sie auch dann glatt bleiben, wenn der Haupt-JavaScript-Thread beschäftigt ist. Sie haben keine Scriptabhaengigkeit, keinen zusätzlichen Payload und degradieren sich sanft auf älteren Geräten. SVG- und JavaScript-Ladezeichen können komplexere Funktionen ausführen, aber für eine einfache Drehung oder springende Punkte ist CSS die leichteste und zuverlässigste Option.
-
Was ist eine cubic-bezier-Timing-Funktion?
Eine cubic-bezier-Timing-Funktion beschreibt, wie eine Animation im Laufe der Zeit beschleunigt und abgeflacht wird, mit vier Steuerpunkten auf einer Kurve. Im Vergleich zu Begriffen wie linear oder ease-in-out ermöglicht cubic-bezier eine feinere Steuerung des Bewegungsempfindens – beispielsweise verwendet ein springender Ball cubic-bezier(0.5, 0.05, 0.5, 0.95), um die Schwerkraft zu simulieren.
-
Warum brauchen Ladeanimationen eine Rolle und ein aria-label?
Screen-Reader können einen drehenden Kreis nicht sehen, daher benötigen sie einen programmatischen Hinweis darauf, dass etwas passiert. Die Rolle „status“ informiert assistive Technologien, dass das Element einen Live-Status-Update übermittelt, und aria-label liefert den für Menschen lesbaren Text, der laut gesprochen wird. Ohne diese Attribute ist ein Lader für sehbehinderte Benutzer unsichtbar.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug wurde am 9. Juni 2026 hinzugefügt
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
