CSS-Lader-Generator Erstellen Sie CSS-Ladepfeile und animierte Lader mit anpassbaren Stilen.

CSS-Spinner verwenden @keyframes-Animationen, um eine kontinuierliche Bewegung zu erzeugen. Die Border-Spinner-Technik verwendet ein kreisförmiges Element mit einer transparenten Rand auf den meisten Seiten und einem farbigen Rand auf einer Seite, dann rotiert es 360 Grad. Die Punkteanimation verwendet Skalentransformationen, um einen Hüpf-Effekt mit gestaffelter Animationsverzögerung zu erzeugen. Die Pulsanimation skaliert ein Element von 0 auf 1, während die Opazität ausblendet. Alle Animationen verwenden animation: name duration timing-function iteration-count. Durch das Setzen von iteration-count auf infinite wird sichergestellt, dass die Schleife kontinuierlich läuft. Die animation-timing-function (ease, linear, ease-in-out) steuert die Geschwindigkeitskurve. Für die Barrierefreiheit sollten Sie role="status" und eine aria-Bezeichnung zu den Spinners hinzufügen. Es ist ratsam, die prefers-reduced-motion-Mediaabfrage zu verwenden, um Animationen für Benutzer, die reduzierte Bewegungen bevorzugen, zu deaktivieren oder zu verringern.