htmlcssfirefoxprogress-barvendor-prefix

Progress Bar - HTML5 - Firefox

I created a progress bar using HTML5 . However I am using a transition effect that only works on Chrome, Opera and Safari. But isn't it working in Firefox?

This is my progress bar -> https://codepen.io/thadeucesario/pen/KKdWKdr

Do you know how I can fix it?

For these browsers I'm using:

progress::-webkit-progress-value {
     background: #0b366f;
     -webkit-transition : width .5s ease;
     -moz-transition : width .5s ease;
     -o-transition : width .5s ease;
     transition : width .5s ease;
}

Thanks!!

Solution

  • I solved this problem by replacing , for two . I used the 'width' of the innermost , as if it were the progress value. Now it worked perfectly on all browsers.

    Particularly, I was unable to solve the problem with vendor prefix.