Как поочередно заполнить несколько progress к ряду?

Question

Есть несколько тегов progress. Xочу заполнить их в порядке очереди, и вот не знаю как это сделать не вешая элементам идшники.

Сейчас при клике заполняются все элементы (на codepen):

function move() {
    $('.progress-line').val( function(i, oldval) {
        var i = 50;
        return i + oldval;
    });
}

$('.btn').on('click', function(){
  
    move()

});

.progress-bar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    .progress-line {
        width: 55px;
        height: 3px;
        border-radius: 5px;
    }
}

.btn {
  display: block;
  margin: 0 auto; 
}

<div class="progress-bar">
  <progress max="100" value="50" class="progress-line"></progress>
  <progress max="100" value="0" class="progress-line"></progress>
  <progress max="100" value="0" class="progress-line"></progress>
  <progress max="100" value="0" class="progress-line"></progress>
  <progress max="100" value="0" class="progress-line"></progress>
</div>
<button class="btn">Increment</button>

Как это реализовать?

Answer 1

function move() {
    var curIdxPb = 0;  // с какого progressbar'a начать
    $('.progress-line').val( function(i, oldval) {
        if (curIdxPb == i) {
          if (oldval >= this.max)
            curIdxPb++;  // переходим к следующему когда он достиг максимума
          return 50 + oldval;
        } 
    });
}

БЛОГ НА HUSL

Как поочередно заполнить несколько progress к ряду?

Ответы (1 шт):