Dave Rupert zeigt uns allen, wie man radiale Fortschrittsbalken in SVG mit einem winzigen Skript neben den Eigenschaften stroke-dasharray und stroke-dashoffset animiert
Für ein Kundenprojekt haben wir uns vorgenommen, einen dieser coolen radialen Fortschrittsbalken zu erstellen. Früher haben wir komplette Canvas-basierte Charting-Bibliotheken (156 KB/44 KB gzip) verwendet, aber das schien übertrieben. Ich habe mir das Lottie-Projekt von Airbnb angesehen, bei dem After Effects-Animationen als JSON exportiert werden. Das ist cool für komplexe Animationen, aber die Abhängigkeiten schienen für eine Mikroanimation schwerwiegend (248 KB/56 KB gzip).
Wie üblich habe ich mein Glück mit einem minimalen benutzerdefinierten SVG mit CSS-Animation und ein wenig JavaScript (~223 B gzip) versucht. Ich bin mit den Ergebnissen zufrieden.
Hier ist ein weiteres Beispiel, das Jeremias Menichelli hier auf CSS-Tricks gepostet hat, mit dem zusätzlichen Kniff, sie als Komponenten in React und Vue zu verwenden.