Multiple <progress> elements on a page with different colors - css

Question

I'm using the element and I've found good instructions on [styling] (http://html5doctor.com/the-progress-element/).
I'd like to have more than one progress bar on a page and I'd like them to have different fill/value colors. Is this possible? Can I do this by tweaking my CSS? Or an I better off rolling my own? Thanks!
.current-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #f7a700
}
.previous-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #98c11e
}
progress::-webkit-progress-bar {
background: #d8d8d8;
}
progress::-webkit-progress-value {
background: #f7a700;
}
<p>Orange bar</p>
<progress class="current-roll" value="0.5"></progress>
<p>Green bar</p>
<progress class="previous-roll" value="0.75"></progress>

Answer 1

progress::-webkit-progress-value is what changes the progress bar color.
Example
progress.current-roll::-webkit-progress-value {
background: #f7a700;
}

Answer 2

You already have what you look for in the example you have given!
use progress.current-rollto style the colors specifically for .current-roll for instance
example below:
.current-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #f7a700
}
.previous-roll {
-webkit-appearance: none;
width: 80%;
height: 25px;
/* next line does nothing */
color: #98c11e
}
progress.previous-roll::-webkit-progress-bar {
background: #d8d8d8;
}
progress.previous-roll::-webkit-progress-value {
background: #f7a700;
}
progress.current-roll::-webkit-progress-bar {
background: #ddd;
}
progress.current-roll::-webkit-progress-value {
background: red;
}
<p>Red bar</p>
<progress class="current-roll" value="0.5"></progress>
<p>Orange bar</p>
<progress class="previous-roll" value="0.75"></progress>