Updating the value of the progress-ring faster than the transition (0.35s) leads to ring out of sync

[benny-noumena]

Describe the bug

When I update the value of the progress-ring faster than the default transition (0.35s) then the ring gets out of sync.

To Reproduce

Steps to reproduce the behaviour:

1. Update progress value faster that 0.35s.

Browser / OS

• OS: Mac
• Browser: Brave
• Browser version: 1.45

Potential solution

Expose the transition as a css variable so it can be overwritten ? Or a flag to turn transition on off?

[claviska]

I'm not seeing anything out of the ordinary when I set it manually (e.g. by quickly clicking a button to increment the value) or in this CodePen.

https://codepen.io/claviska/pen/NWzqwBZ?editors=1010

Can you please provide a repro on CodePen, JSFiddle, or similar?

[benny-noumena]

Wow, thanks for a such fast response.

https://codepen.io/bennyschudel/pen/bGKdYOP?editors=1010

This example shows what I meant. The circle is 75% but the value says 100% by then.

[claviska]

I'm not seeing that. The circle is 100% as is the value in Chrome, Firefox, and Safari.

Just to triple check, I added a log to the loop and it's reporting 100% as the last value set.

And document.querySelector('sl-progress-ring').value is also showing 100 after the loop.

From what I understand, you're seeing the circle only filled to 75% but I haven't been able to reproduce that. Am I missing something?

[benny-noumena]

Not exactly. It is 100% in the end but when you compare the % number in the middle is not in sync with the bar. That looks somehow wrong.

[benny-noumena]

Here is an example image. And a video. If you scrubb it you will see that the number does not reflect the bar track.

progress-ring.mp4

[claviska]

Ah, got it. What you're seeing is a delay from the default transition. I was going to give you some CSS to reduce the duration but it looks like it's currently hardcoded, so I've added --indicator-transition-duration in ab754e9 to give you more control over that.

In the next release, you'll be able to customize this or even turn off the transition with the following CSS:

sl-progress-ring {
  --indicator-transition-duration: 0;
}

That should solve it for you. If not, post a follow up and I'll be happy to reopen this.

[benny-noumena]

That is perfect.

I may think that this affects the progress-bar as well.

Many thanks for all your efforts!

[claviska]

Progress Ring uses an SVG under the hood, but Progress Bar doesn't. In fact, the latter has an indicator part so you can solve that today with:

sl-progress-bar::part(indicator) {
  transition-duration: 0;
}

I'm reluctant to expose the <circle> elements as parts because of some trouble I was having in Safari, but that can be revisited as well. Unfortunately, it still won't give us consistency between Progress Ring and Progress Bar because, for example, one uses background-color and the other uses stroke to set the color.