Есть 5 progress-bar, как узнать, какое значение progress-bar больше и дать разные цвета?

Question

[Lavrov95]

<div class="container">
    <h2>Colored Progress Bars</h2>
    <p>Use any of the contextual color classes to change the color of the progress bar:</p>
    <!-- Green -->
    <div class="progress">
        <div class="progress-bar bg-success" style="width:20%"></div>
    </div>
    <br>
    <!-- Blue -->
    <div class="progress">
        <div class="progress-bar" style="width:10%"></div>
    </div>
    <br>
    <!-- Turquoise -->
    <div class="progress">
        <div class="progress-bar bg-info" style="width:30%"></div>
    </div>
    <br>
    <!-- Orange -->
    <div class="progress">
        <div class="progress-bar bg-warning" style="width:40%"></div>
    </div>
    <br>
    <!-- Red -->
    <div class="progress">
        <div class="progress-bar bg-danger" style="width:50%"></div>
    </div>
    <br>
</div>

Comments

[Максим Федоров]

уточните задачу

[Lavrov95]

Максим Федоров, самому большому дать зелёный свет потом жалобой и тагдали

[Максим Федоров]

Lavrov95, и все равно не понятно ничего
куда дать, зачем дать, у вас жу уже все написано!
почему теги PHP и AJAX, а описан вопрос по верстке и код верстки приведен

В общем -- ничего не понятно

Answer 1

[Илья]

Попробовал угадать - вопрос в том, как по ходу движения менять цвет прогрессбара?
Если это так, то вот пример: https://codepen.io/anon/pen/WKpNdG
Грубоват, но принцип работы должен быть ясен.

Answer 2

[Сергей delphinpro]

Подход в корне неверный =)
Не из интерфейса нужно считывать данные, а интерфейс рисовать по имеющимся данным.

let progressBarsColor = ['green', 'blue', 'red'];
let progressBarsValues = [23, 43, 35];

progressBarsValues.sort(); // сортируем по возрастанию

progressBarsValues.forEach((value, index) => {
  // создаем на странице прогресс-бары
  let color = progressBarsColor[index];
  makeProgressBar(value, color);
});

function makeProgressBar(value, color) {
  // Эта функция генерит разметку бара
  // или связывается с имеющимися на странице
  // по какому-то признаку и задает им параметры
}