New post! Animated SVG Radial Progress Bars in ~6 Lines of JavaScript https://daverupert.com/2018/03/animated-svg-radial-progress-bars/ …pic.twitter.com/AwMMlpWSXM
-
Show this thread
-
Replying to @davatron5000
Great write up! I made something very similar some time ago
https://github.com/kdzwinel/progress-bar-animation … . Absolutely agree that SVG is perfect for this. Unfortunately, I found out that performance on mobile was really bad
It was 2y ago though, so maybe things are better today?1 reply 0 retweets 1 like -
Replying to @kdzwinel
Nice! I don't know if things changed with Chrome's SVG implementaiton, but this trace seems alright. But my ability to decipher DevTools decreases over time. Maybe
@paul_irish or@slightlylate can verify.pic.twitter.com/xkqkVipDHP
1 reply 0 retweets 0 likes -
That looks fine, but it's from a desktop-class device. Lemmie see if I can get WPT to give us a device view...
1 reply 0 retweets 1 like -
I can see that
@davatron5000 turned the CPU throttling on
However, as far as I remember, the rasterization was the bottleneck and it's not getting throttled in any way (there are multiple rasterization threads on desktop while there is 1 on mobile).1 reply 0 retweets 0 likes -
Replying to @kdzwinel @slightlylate and
Unfortunately, still far from perfect
I tested this animation - https://rawgit.com/kdzwinel/progress-bar-animation/minimal/index.html … - it doesn't have any JS or fancy CSS styling.pic.twitter.com/nDdRSw70li
1 reply 0 retweets 0 likes -
Replying to @kdzwinel @slightlylate and
Oh, oops, it looks pretty good if I turn the screenshots off. But the GPU looks almost fully busy, so there is no much room for other animations happening in the same time.pic.twitter.com/6ouUZViXpS
1 reply 0 retweets 0 likes -
Sorry for the delay; here's a quick trace: https://www.webpagetest.org/result/180329_7X_06b61e828ac039da95ab84170271b8c3/# … Timeline looks pretty smooth!: https://www.webpagetest.org/chrome/trace.php?test=180329_7X_06b61e828ac039da95ab84170271b8c3&run=1 …
1 reply 0 retweets 2 likes
The raster timings are a bit worrying; it'd jank on a slightly slower device.
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.