Wie man einen kreisförmigen Fortschrittsring animiert
Wie man einen animierten Fortschrittsring mit SVG baut, wann bestimmter und wann unbestimmter Fortschritt passt und warum man keinen falschen Fortschritt animieren sollte.
Kernaussage
Nutze einen bestimmten Ring nur, wenn du wirklich weißt, wie weit die Arbeit ist. Baue ihn aus einem SVG-Kreis, animiere stroke-dashoffset und aktualisiere den Wert aus echten Fortschrittsereignissen. Ist der Fortschritt unbekannt, nutze einen unbestimmten Indikator statt eines Rings, der auf 90 Prozent zukriecht. Kombiniere den Ring immer mit einem Text- oder zugänglichen Wert.
Bestimmt oder unbestimmt
Ein bestimmter Ring zeigt einen Anteil; ein unbestimmter Indikator zeigt, dass Arbeit läuft, aber nicht wie viel fehlt. Sie beantworten unterschiedliche Fragen, und ihre Mischung erzeugt den falschen Balken, der bei 90 Prozent hängt. Kannst du den Fortschritt nicht messen, zeichne keinen Ring, der ihn vortäuscht.
Die SVG-Strich-Technik
Zeichne einen Kreis mit fill none, gib ihm einen Strich und setze stroke-dasharray auf den Umfang. Animiere dann stroke-dashoffset vom vollen Umfang auf den Versatz des aktuellen Prozentsatzes. Drehe den Kreis, damit der Ring oben bei zwölf Uhr beginnt.
Glätte die Aktualisierungen, nicht die Wahrheit
Fortschrittsereignisse kommen oft in Sprüngen. Den visuellen Übergang zwischen zwei echten Werten zu glätten ist in Ordnung und sieht besser aus; zwischen Aktualisierungen Bewegung zu erfinden nicht. Halte den angezeigten Wert an die letzte echte Messung gebunden.
Gib langsamer Arbeit einen sichtbaren Zustand
Dauert ein Schritt lange, wirkt ein kaum bewegter Ring eingefroren. Ergänze ein Label, das die Phase beschreibt, und erwäge eine dezente unbestimmte Bewegung im Ring. Lass nicht den ganzen bestimmten Ring rotieren, das zerstört die Lesbarkeit des Fortschritts.
Beschrifte ihn und lege den Wert offen
Setze Prozentwert oder Schritt als Text neben den Ring und gib dem Element einen zugänglichen Wert mit progressbar-Semantik. Ein rein visueller Ring ist für Screenreader unsichtbar.
Performance
Ein SVG-Ring, der über den Strichversatz läuft, ist meist günstiger als ein Canvas-Redraw oder ein layoutbasierter Balken. Animiere ihn aus einem einzigen Wert und vermeide es, bei jedem Frame einen großen Komponentenbaum neu zu rendern. Teste auf einem Mittelklasse-Handy.
Produktionsnahes Implementierungsbeispiel
<svg viewBox="0 0 36 36" role="progressbar"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
<circle cx="18" cy="18" r="15.9" fill="none"
stroke="#e5e5e5" stroke-width="3" />
<circle cx="18" cy="18" r="15.9" fill="none"
stroke="#ff4a1c" stroke-width="3"
stroke-dasharray="100"
stroke-dashoffset="35"
transform="rotate(-90 18 18)" />
</svg>
<!-- pathLength="100" lets you use percentages directly. -->Wichtige Prinzipien
- Nutze einen bestimmten Ring nur bei messbarem Fortschritt
- Animiere stroke-dashoffset auf einem SVG-Kreis
- Glätte Übergänge zwischen echten Werten, erfinde nie Bewegung
- Kombiniere den Ring mit Text und progressbar-Semantik
- Teste den Ladebildschirm auf einem Mittelklasse-Handy
Häufige Fragen
Quellen
- stroke-dasharray — MDN Web Docs
- ARIA progressbar role — MDN Web Docs
- Animation performance and frame rate — web.dev