Html progress

Question

e.g.:
<progress min="0" max="100" value="15"/>

Instead of "15" let's say that i want to put a variable from JavaScript, so that the progress value is not constant.

Also, i want to change its color. Maybe with id in CSS.

Answer 1

var newProgress= 28;
var progressEl= document.getElementById("myProgress");
progressEl.value= newProgress;

stylizing it its not simple because browsers allow it (in some degree) in different ways https://css-tricks.com/html5-progress-element/

If you want more control, you can easly emulating it with div so you can style it in better way and more cross-browser

Answer 2

Here I made example for u

https://code.sololearn.com/WGfj4XMyBUiD/?ref=app