How can I change the progress color dynamically

Question

I need change the color of a progress according with your value. I saw that the code below works

progress[value^"50"]::-moz-progress-bar{background-color:green}

In the code above I can change the color, but in my case I use a tecnology(GWT 2.7) that does not support the operator "^".

I saw too a code like:

#pb::-moz-progress-bar {background-color: green;}

But in my case I should change dinamically the value of background-color.

Tks in advance

Answer 1

I achieve the result using css class bellow

progress:before  {
    content: attr(data-label);
    color: white;
    vertical-align: 0;

     /*Position text over the progress bar */
     position:absolute;
    text-align:center;
    left:0;
    right:0;
}

progress {
    -webkit-appearance: none;
    background-color: gray;
    position:relative;
    height: 15px;
    width: 255px;
}
.progressBarRed::-moz-progress-bar {
    width: 250px;
    height: 15px;
    border-style: solid;
    border: 1px;
    background-color: red;
}

The unique problem that I faced were that the pseudo selector :before does not work in progress element(Firefox). In Chrome work's right.