Javascript按时间加载吧

我搜索了这么多,但我无法弄清楚如何配置我的酒吧.

我计划放置3个按时间自动执行的加载条:

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

谢谢你们

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
}