CSS transition counter?

Question

I have a progress bar on the page. I currently have a bar that transition affects, so when you change the course, it smoothly transitions to a new value.

The bar also contains its progress, expressed as a percentage.

The “problem” I am facing is that the indicated number will go from value to value when changing the bandwidth, so I'm wondering if there is any way for CSS to “translate” the number.

The only solution I can think of is to use

 counter-reset: tmpcounter 50; content: counter(tmpcounter); transition: counter-reset 0.5s ease; 

Of course, this does not work. Even if that were the case, it would only work for the psuedo element, so I won’t be able to change it using JavaScript when the value changes.

Am I missing something, or just don't worry about it?

Answer 1

I'm not sure I understand the problem with jumping numbers. But will this example help the indicator corresponding to the readings of the thermometer ?