Multiple <progress> elements on a page with different colors

Question

I am using an element and I have found good [styling] instructions ( http://html5doctor.com/the-progress-element/ ).

I would like to have more than one progress bar per page, and I would like them to have different fill colors / values. Is it possible? Can I do this by customizing my CSS? Or am I better off folding? Thank!

.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>

Run code

Answer 1

progress::-webkit-progress-value - This is what changes the color of the progress bar.

Example

progress.current-roll::-webkit-progress-value {
  background: #f7a700;
}

Answer 2

You already have what you are looking for in the example you pointed out!

progress.current-roll .current-roll

:

.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>