SVG-Laden-Spinner-Generator

SVG ist ein Vektorformat, sodass Spinner bei jeder Größe und auf jeder Pixeldichte perfekt schärfer bleiben. Die Dateigröße ist klein (häufig einige hundert Bytes), die Farben können über CSS im Laufe der Zeit geändert werden, und die Animation kann pausiert, fortgesetzt oder neu gestaltet werden, ohne das Asset erneut zu kodieren. GIFs hingegen sind rasterspezifisch, größer, verlieren an Kanten und sind an die Farben und Geschwindigkeit gebunden, die beim Export des Dateis festgelegt wurden.

Ein determinater Indikator zeigt den tatsächlichen Fortschritt zu einem bekannten Gesamtwert an, wie ein Fortschrittsbar, der von 0 bis 100 gefüllt wird. Ein indeterminater Indikator sagt dem Benutzer nur, dass Arbeit stattfindet, wenn die Dauer oder der Fortschritt nicht gemessen werden kann – zum Beispiel bei einer Netzwerkantwort. Die meisten Spinner (drehende Kreise, pulsierende Punkte, Wellen) sind indeterminat; Bar-Loader können entweder determinat oder indeterminat sein, je nachdem, ob sie einen beweglichen Abschnitt oder eine gefüllte Bruchteil anzeigen.

Als allgemeine Benutzererfahrung, zeigen Sie keine Indikatoren für Aktionen, die in unter etwa 100 ms enden – das UI fühlt sich sofort an. Zwischen etwa 100 ms und 1 Sekunde ist ein kleiner, eingebetteter Indikator neben dem betroffenen Element ausreichend. Ab 1 Sekunde verwenden Sie einen klaren Spinner. Bei Warten über etwa 10 Sekunden wechseln Sie zu einem determinaten Fortschrittsindikator mit einer sinnvollen Nachricht, da Benutzer anfangen, zu verlieren, dass das System noch arbeitet.

CSS-Animationen target SVG-Elemente genauso wie HTML-Elemente: Sie schreiben eine keyframes-Regel und wenden sie über die animation-Eigenschaft auf eine Klasse an. Gängige Ziele sind rotate-Transformationen für Drehungen, Opacity für Fade-Effekte und stroke-dashoffset für die Zeichnungseffekte auf Kreisen und Linien. Um die Drehung an der visuellen Mitte eines Elements zu fixieren, legen Sie transform-origin auf diesen Punkt fest. Animationen, die innerhalb eines Styles-Elements innerhalb des SVG selbst definiert sind, bleiben auf diesen Dokument beschränkt, weshalb ein selbstständiger SVG-Loader funktioniert, wenn er in jede Seite eingefügt wird.

Markieren Sie das Spinner-Element mit role=status (oder role=progressbar für determinaten Fortschritt), damit assistive Technology die Updates als Live-Region behandelt. Geben Sie einen kurzen, sinnvollen aria-label wie „Laden“ oder „Speichern“ an, damit der Zweck bekanntgegeben wird, und vermeiden Sie das Vertrauen auf Farbe, um den Zustand zu übermitteln. Für determinaten Fortschritt legen Sie auch aria-valuenow, aria-valuemin und aria-valuemax fest, damit der Prozentsatz beim Update lautgegeben wird.