How to stack progress bars into one bar with Bulma css

Question

I'm trying to create a progress bar which is made up of multiple colours that all add up to fill a singular bar.

I can make 3 individual bars but I'd like to make it similar to the Bootstrap one

To make 3 bars I've done:

<progress class="progress is-success" value="50" max="100"></progress>
<progress class="progress is-warning" value="35" max="100"></progress>
<progress class="progress is-danger" value="15" max="100"></progress>

The end goal being I'd have one bar with the green portion, the yellow portion filling up the next portion and then the red filling out the remainder.

Answer 1

This is not possible using the progress element, you'll need to create your own progress bar, which would look something like this:

.progress {
  background-color: #ccc;
  width: 100%;
  height: 10px;
}

.progress-bar { float: left; }

.progress-bar.orange {
  background-color: orange;
  height: 100%;
}

.progress-bar.blue {
  background-color: blue;
  height: 100%;
}

.progress-bar.yellow {
  background-color: yellow;
  height: 100%;
}

<div class="progress">
  <div class="progress-bar orange" style="width:10%;"></div>
  <div class="progress-bar blue" style="width:30%;"></div>
  <div class="progress-bar yellow" style="width:50%;"></div>
</div>