CSS Static Progress Bar filled by multiple values

Question

I have this fixed progress bar that takes as width its size and back some value, let's say val1=30%. I would like to add a second value let's say val2=70% in the same bar, so that it will fill the remaining space but with a different color, so that the progress bar will show both.

Generalizing this, the same should work having more than two values, like with three values here: val1=0.3, val2=0.3 and val3=0.4, etc.

I would like to achieve this only using by CSS, no additional Javascript, since I have all the values fulfilled already in the page and I'm using templates so I can iterate over these values.

.miniBarProgress {
    background-color: #8a898a;
    height: 100%;
    position: absolute;
    top: 0rem;
    left: 0rem;
}
.miniBar {
    height: 0.5rem;
    border: 1px solid #8a898a;
    position: relative;
    width: -webkit-calc(100% - 2rem);
    width: -moz-calc(100% - 2rem);
    width: calc(100% - 2rem);
    margin-right: 0.5rem;
}

<div class="miniBar"><div class="miniBarProgress" style="width: 30%;"></div></div>

[UPDATE] Thanks to the answer below I have fixed up the code to make it working.

.miniBarProgress {
    height: 100%;
    position: absolute;
    top: 0rem;
    left: 0rem;
}
.miniBar {
    height: 0.5rem;
    border: 1px solid #8a898a;
    position: relative;
    width: -webkit-calc(100% - 2rem);
    width: -moz-calc(100% - 2rem);
    width: calc(100% - 2rem);
    margin-right: 0.5rem;
}

<div class="miniBar">
<div class="miniBarProgress" style="left: 0; width: 30%; background-color: gray;"></div>
<div class="miniBarProgress" style="left: 30%; width: 40%; background-color: red;"></div>
<div class="miniBarProgress" style="left: 70%; width: 30%; background-color: blue;"></div>
</div>

Answer 1

You will need another miniBarProgress for each value. Use the left property to start from where the previous value ended (i.e. left + width). Here is an example with 3 values:

.miniBarProgress1 {
  background-color: #8a898a;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 20%;
}

.miniBarProgress2 {
  background-color: #ff0;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 20%;
  width: 40%;
}

.miniBarProgress3 {
  background-color: #0ff;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 60%;
  width: 30%;
}

.miniBar {
  height: 0.5rem;
  border: 1px solid #8a898a;
  position: relative;
  width: -webkit-calc(100% - 2rem);
  width: -moz-calc(100% - 2rem);
  width: calc(100% - 2rem);
  margin-right: 0.5rem;
}

<div class="miniBar">
  <div class="miniBarProgress1"></div>
  <div class="miniBarProgress2"></div>
  <div class="miniBarProgress3"></div>
</div>

Alternatively, you can use the same class miniBarProgress for all bars and always start from zero. In this case, you'll have to order the bars in reverse (longer to shorter) or use the z-index property to do that. Each bar will hide part of the bars behind it:

.miniBarProgress {
  background-color: #8a898a;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 0rem;
}

.miniBar {
  height: 0.5rem;
  border: 1px solid #8a898a;
  position: relative;
  width: -webkit-calc(100% - 2rem);
  width: -moz-calc(100% - 2rem);
  width: calc(100% - 2rem);
  margin-right: 0.5rem;
}

<p>Reverse order:</p>
<div class="miniBar">
  <div class="miniBarProgress" style="width: 90%; background-color: #0ff;"></div>
  <div class="miniBarProgress" style="width: 60%; background-color: #ff0;"></div>
  <div class="miniBarProgress" style="width: 20%; background-color: #8a898a;"></div>
</div>
<p>Using z-index</p>
<div class="miniBar">
  <div class="miniBarProgress" style="width: 20%; z-index: 3; background-color: #8a898a;"></div>
  <div class="miniBarProgress" style="width: 60%; z-index: 2; background-color: #ff0;"></div>
  <div class="miniBarProgress" style="width: 90%; z-index: 1; background-color: #0ff;"></div>
</div>