Как изменить CSS нескольких элементов за время ожидания? (несколько индикаторов выполнения)

Question

Я разрабатываю несколько индикаторов выполнения, полосы располагаются горизонтально, как в истории в Instagram или в истории в Facebook, я пытаюсь установить ширину первого элемента с классом "bar" каждые 4 секунды и позже изменить следующий элемент с классом "bar".

пример: https://i.imgur.com/XUZuVhi.jpg

Я попробовал код ниже:

count = 0;
setInterval(function() {
  while ($(".bar").css("width") != "100%") {
    count++
    for (i = 0; i < bar.length; i++) {
      bar[i].style.width = count + '%';
    }
  }
}, 4000);

Answer 1

Потребовалось некоторое время, чтобы понять, что вы имели в виду

Один за другим

var count = 0, len = $(".bar").length, w = 1;
var tId = setInterval(function() {
  $(".bar").eq(count).css({ width: w + '%' });
  w++;
  if (w>=100) { 
    w = 0; count++;
    if (count>=len) clearInterval(tId); // stop
  }
}, 200);

.red {
  background-color: red;
  width: 0;
}

.yellow {
  background-color: yellow;
  width: 0;
}

.green {
  background-color: green;
  width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="bar red">&nbsp;</div>
  <div class="bar yellow">&nbsp;</div>
  <div class="bar green">&nbsp;</div>
</div>

---

Один за другим

var count = 0, len = $(".bar").length, w = 1;
var tId = setInterval(function() {
  $(".bar").eq(count).css({ width: w + '%' });
  count++;
  if (count >= len) { 
    count = 0; w++; 
    if (w>=100) clearInterval(tId); // stop
  }
}, 1000);

.red {
  background-color: red;
  width: 0;
}

.yellow {
  background-color: yellow;
  width: 0;
}

.green {
  background-color: green;
  width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="bar red">&nbsp;</div>
  <div class="bar yellow">&nbsp;</div>
  <div class="bar green">&nbsp;</div>
</div>