Как изменить ширину цветного индикатора выполнения с линейным фоном?

Question

У меня есть этот код CSS и HTML.

Моя проблема в том, что я всегда вижу линейный цвет, кроме цвета, который я определил для 60% как зеленый.От 0 до 60% ширины хочу видеть только зеленый, а не другие.Я думал, что когда бар определен как background-image, он будет работать, но это не так.

.bar-line {
    width: 100%;
    min-width: 120px;
    display:inline-block;
    position:relative;
    vertical-align: middle;
    color: #000;
    background-color: #f1f1f1;
}
.bar-container {
    padding: 0;
    min-height: 24px;
    max-width: 100%;
    color: #000;
    background-image: linear-gradient(to right, green 60%, yellow 85%, red 95%);
}
.bar-container:after, .bar-container:before {
    content: "";
    display: table;
    clear: both;
}
.bar-container span {
    position: absolute;
    left: 5px;
}

<div class="bar-line">
    <div class="bar-container" data-percent="30" style="width: 30%;">
        <span>30%</span>
    </div>
</div>

Как это сделать без JS?

Answer 1

Использование нескольких фонов и настройка размера фона:

.bar-line {
    width: 100%;
    min-width: 120px;
    margin-bottom:10px;
    display:inline-block;
    position:relative;
    vertical-align: middle;
    color: #000;
    background-color: #f1f1f1;
}
.bar-container {
    padding: 0;
    min-height: 24px;
    max-width: 100%;
    color: #000;
    background: 
      linear-gradient(#f1f1f1,#f1f1f1) right/calc(100% - var(--d)) 100% no-repeat,
      linear-gradient(to right, green 60%, yellow 85%, red 95%);
}

.bar-container span {
    position: absolute;
    left: 5px;
}

<div class="bar-line">
    <div class="bar-container" style="--d:30%">
        <span>30%</span>
    </div>
</div>

<div class="bar-line">
    <div class="bar-container" style="--d:50%">
        <span>50%</span>
    </div>
</div>

<div class="bar-line">
    <div class="bar-container" style="--d:80%">
        <span>80%</span>
    </div>
</div>

Answer 2

Хотя лучше сделать html-часть другой

   .bar-line {
    position: relative;
    width: 100%;
    height: 24px;
    display:inline-block;
    position:relative;
    vertical-align: middle;
    color: #000;
    background-image: linear-gradient(to right, green 60%, yellow 85%, red 95%);  
    overflow: hidden;
}
.bar-container {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  min-height: 24px;
  z-index: 0;
}

.bar-container span {
  text-indent: -100%;
  display: block;
  background-color: #f1f1f1;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1000vh;
  right: -1000vh;
  z-index:1; 
}

<div class="bar-line">
    <div class="bar-container" data-percent="30" style="width: 30%;">
        <span>30%</span>
    </div>
</div>

Просто измените значение ширины и посмотрите результат :).Грязный трюк здесь в том, чтобы иметь очень большой промежуток, расположенный после бара-контейнера и перекрывающий остальную часть цветной линии