Javascript Loading Bars according time

Question

I've searched so much but I can't figure it out how to configure my bars.

I plan to put 3 loading bars that execute automatically according time:

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

My Code is this ( be aware that I don't know how to change this values, I tried but don't work properly... This is the help I need, the frame stuff )

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 + '%'; 
        }
    }
}

Thank you all

Answer 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>

Answer 2

Here is a bit refactored version of your code. To run a progress bar you need to call startBar() function with the time you want it to start and end and the id of a progress bar element. For example, in the code below the first bar will start after 1 second and end after 6 seconds (running for 5 seconds in total).

I also used HTML5 progress element. It is much better than using divs as progress is semantic and you don't have to manipulate any css parameters, you just change it's value. Plus it has a bonus of looking native to the platform and browser it is rendered on. However, if you want to style it to look the same on all platforms, it can be a bit of a pain. Here is a styling guide for progress element

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>