Как изменить цвет прогресс бара в зависимости от процента?

Question

[goldwizard13]

Как изменить цвет прогресс бара в зависимости от процента, если до 10 - красный до 20 желтый итд (или градиент)? Выводятся проценты в цикле три раза каждый свое значение. Шаблон Bootstrap 3.

<Цикл-шаблонизатор>
 <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: `процент`%;"> `название`</div>
  </div>
<ЕНД Цикл>

.progress {
    height: 7px;
    box-shadow:none;
    -webkit-box-shadow:none;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(230,230,230,0.3)),to(rgba(230,230,230,0.8)), color-stop(.2,#fff) );
}

.progress-bar {
    box-shadow:none;
    -webkit-box-shadow:none;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(230,230,230,0.5)),to(rgba(230,230,230,0.2)), color-stop(0,rgba(255,255,255,0.7)) );
}

Answer 1

[Anna_BS]

codepen

Comments

[goldwizard13]

Спасибо

Answer 2

[One of Us]

Пропиши скрипт на js с условиями.