Aufgabenpfad / von der Eingabe zum Ergebnis
So gestaltest du einen CSS-Loader
- 01
Wähle einen Loader-Stil
Öffne Loader-Stil und wähle Orbit-Ring für einen klassischen rotierenden Ring oder Drei Punkte für ein hüpfendes Punkte-Trio. Die Live-Vorschau animiert bei jeder Änderung, die du machst, und jeder Stil bringt beim Export seine eigenen @keyframes mit.
- 02
Dimensioniere Rahmen und Strich
Verwende einen Rahmen von 24–160 px und einen Strich bzw. Punkte von 2–20 px. Der Strich des Rings muss kleiner als die halbe Rahmengröße sein. Die drei Punkte müssen mit mindestens 2 px Abstand hineinpassen; andernfalls sind Kopieren und Herunterladen deaktiviert. Die exportierten Maße des Rings schließen seinen Rand ein.
- 03
Stimme Tempo und Farben ab
Wähle eine Zyklusdauer von 0,2 bis 4 Sekunden in Schritten von 0,05 s. Aktive Farbe färbt den oberen Ringrand oder den mittleren Punkt; Track-Farbe färbt den übrigen Ring oder die beiden äußeren Punkte. Langsame Zyklen wirken wie ruhige Hintergrundarbeit; schnelle wirken dringlich.
- 04
Oder starte mit dem Beispiel
Drücke Beispiel laden, um eine markante Drei-Punkte-Vorgabe anzuwenden — 72 px Rahmen, 12 px Punkte und ein 0,75-s-Zyklus in Rot und Gelb — als Ausgangspunkt. Zurücksetzen kehrt immer zum Standard-Orbit-Ring zurück.
- 05
Kopiere oder lade das CSS herunter
Drücke CSS kopieren, um das Regelset in die Zwischenablage zu legen, oder .css herunterladen, um toolars-loader.css zu speichern. Das Ausgabefeld zeigt die exakten Bytes, die du exportierst, und beide Schaltflächen bleiben deaktiviert, solange ein Wert die Validierung nicht besteht.
- 06
Binde es in dein Markup ein
Orbit-Ring braucht ein einzelnes Element mit der Klasse .loader; Drei Punkte erwartet drei span-Kindelemente darin. Der Export enthält einen prefers-reduced-motion-Block, der die Animation für bewegungssensible Besucher stoppt.