[btcindivist]

Given there's only a single svg element changing I'm not exactly sure you could have done it better.

It might just be that the ease-out transitions for the stroke are not efficiently implemented in whatever browser you're using.

If you've tried and check out and understand the code you'd see there's so little being done in JS that this stuff is surely not the bottleneck.

[kuschku]

Use a canvas and render the component directly? You’re rendering a circular progress bar, that should be easily doable in microseconds if not nanoseconds. There’s no need to use the overly bloated DOM for everything.

I suggest taking a look at Android’s views or even Flutter.

[btcindivist]

But there's only 3-4 DOM elements. I'm pretty sure doing this in canvas is not as trivial as this.

[kuschku]

Of course it’s not as trivial. But you can control the animation much better, and you can have much better performance.

[vilvadot]

Yeah, more than likely the only problematic part is the transition animation. The main problem was another component breaking the performance in the examples page, not the component itself. Should be fixed now :)