Progress and transition

[YpsilonTM]

I want the progress bar to go smooth when the value changes but I have tried a few things but I can't seem to find how to get smooth transitions with the progress bar. Is this even possible?
<progress class="progress transition-all" {value} max="100" />

I found this but that doesn't even work for me. Is there a way that anyone knows of or is it impossible.

[YpsilonTM]

My apologies I didn't dive deep enough into the web. I have found the solution myself.
[&::-webkit-progress-value]:transition-all

[rafalkrupinski]

I don't think you should have to use a prefix.

[YpsilonTM]

You mean just transition-all ? I have tried that it doens't work.

[saadeghi]

Webkit and Mozilla have confusing names for progress selector.

• ::-webkit-progress-bar is for the background of the progress
• ::-webkit-progress-value is for the foreground of the progress
• ::-moz-progress-bar unlike ::-webkit-progress-bar is for the foreground of the progress

So here you should use both ::-webkit-progress-value and ::-moz-progress-bar to style the value bar. As far as I know, even Autoprefixer doesn't help here and you should include prefixes yourself.

[condemil]

Looks like [&::-moz-progress-bar]:transition-all doesn't work in Firefox, I tried version 122 on Linux.