CSS transition a counter?

Question

I have a progress bar of sorts on a page. Currently I have the bar affected by a transition so that when the progress changes it moves smoothly to the new value.

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

The "problem" I'm facing is that the number shown will jump from value to value while the bar width transitions, so I'm wondering if there's any way for CSS to "transition" 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 doesn't work. Even if it did, it would only work for a psuedo-element so I'd have no way to modify it with JavaScript when the value changes.

Am I missing anything, or is it just not worth worrying about this?

Answer 1

I am not sure I understand the issue with the jumping numbers. But would this example of a Thermometer-like progress bar help?