Как сделать такие полоски прогресса? [требует правки]

вот так:

<div class="box">
      <div class="box-line">
        <div class="box-line__progress box-line__progress_aqua"></div>
      </div>
      <div class="box-line">
        <div class="box-line__progress box-line__progress_lime"></div>
      </div>
      <div class="box-line">
        <div class="box-line__progress box-line__progress_tomato"></div>
      </div>
    </div>

.box{
  padding: 20px 40px;
  background: #eee;
  &-line{
    width: 350px;
    height: 5px;
    margin: 15px 0;
    background: #aeaeae;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    &__progress{
      position: absolute;
      top: 0;
      left: 0;
      height: 5px;
      border-radius: 5px;
      &_aqua{
        width: 75%;
        background: aqua;
      }
      &_lime{
        width: 50%;
        background: lime;
      }
      &_tomato{
        width: 80%;
        background: tomato;
      }
    }
  }
}