Загрузка баров по времени

Я так много искал, но не могу понять, как настроить мои бары.

Я планирую разместить три загрузочных столбца, которые выполняются автоматически в зависимости от времени:

1st will start from 30 to 60 seconds
2nd from 300 to 1800 seconds
3rd from 1801 to 1860 seconds

Мой код - это (имейте в виду, что я не знаю, как изменить эти значения, я пытался, но не работал должным образом... Это нужна мне помощь, материал фрейма)

var my1Bar = setTimeout(start1Bar, 30000);
var my2Bar = setTimeout(start2Bar, 300000);
var my3Bar = setTimeout(start3Bar, 1800000);
function start1Bar() {
    var elem = document.getElementById("my1Bar"); 
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}
function start2Bar() {
    var elem = document.getElementById("my2Bar"); 
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}
function start3Bar() {
    var elem = document.getElementById("my3Bar"); 
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}

Спасибо всем

Ответ 1

startBar(3000,4000 ,"my1Bar");
startBar(4001,20000 ,"my2Bar");
startBar(20001,22000,"my3Bar");

function startBar(start_ms,end_ms,id){
    return setTimeout(function(){
        loadBar(start_ms,end_ms,id);
    }, start_ms);
}
function loadBar(start_ms,end_ms,id){
    var elem = document.getElementById(id); 
    var widthAtStart = 0;
    var widthAtEnd = 100;
    var timeDuration=end_ms-start_ms;
    var remindWidth=widthAtEnd-widthAtStart;
    var curWidth=widthAtStart;
    var lastTime=Date.now();
    var intervalId = setInterval(frame, 10);
    function frame() {
        var dt=Date.now()-lastTime;
        lastTime=Date.now();
        var w=remindWidth*dt/timeDuration;
        if (curWidth >= widthAtEnd) {
            clearInterval(intervalId);
            elem.style.width = '100%'; 
        } else {
            curWidth+=w;
            elem.style.width = curWidth + '%'; 
        }
    }
}

.bars>div{
  position:relative;
  width:100%;
  height:22px;
  padding:1px;
  margin:2px;
  background:#ccc;
}
.bars>div>div{
  position:absolute;
  height:20px;
  width:0;
  background:red
}

<div class="bars">
  <div><div id="my1Bar"></div></div>
  <div><div id="my2Bar"></div></div>
  <div><div id="my3Bar"></div></div>
</div>

Ответ 2

Ниже приведена небольшая рефакторинговая версия вашего кода. Чтобы запустить индикатор выполнения, вам нужно вызвать функцию startBar() с указанием времени начала и конца и id элемента индикатора выполнения. Например, в приведенном ниже коде первая бара начнется через 1 секунду и закончится через 6 секунд (всего 5 секунд).

Я также использовал элемент HTML5 progress. Это намного лучше, чем использование divs, поскольку progress является семантическим, и вам не нужно манипулировать какими-либо параметрами CSS, вы просто изменяете его значение. Кроме того, у него есть бонус к тому, чтобы выглядеть родным для платформы и браузера. Однако, если вы хотите, чтобы стиль выглядел одинаково на всех платформах, это может быть немного больно. Вот руководство по стилю для элемента прогресса

startBar(1, 6, "first");
startBar(3, 6, "second");
startBar(5, 8, "third");

function startBar(from, to, id) {
  // Convert seconds to miliseconds
  from *= 1000;
  to *= 1000;

  // Delay the start of the loop for 'from' seconds
  setTimeout(function() {
    var bar = document.getElementById(id);
    var duration = to - from;
    var start = Date.now();

    // Start the loop
    var loop = setInterval(function() {
      var runningFor = Date.now() - start;
      if (runningFor <= duration) {
        bar.value = Math.ceil(runningFor / duration * 100);
      } else {
        bar.value = 100;
        clearInterval(loop);
      }
    }, 10);
  }, from);
}

progress {
  width: 100%;
}

<progress id="first" value="0" max="100"></progress>
<progress id="second" value="0" max="100"></progress>
<progress id="third" value="0" max="100"></progress>