html - 使进度条移动

Question

我想制作一个 html 进度条，所以我使用了下面的代码，但它是静态的，无论如何让它通过 javascript 变量或其他东西移动？
我用过document.getElementById("progress-inner").style.width = percent;，但它工作一次。

html

<div style="position:absolute; top:100" id="progress-outer">
    <div id="progress-inner"></div>
</div>

css

progress-outer {
    background: #333;
    -webkit-border-radius: 13px;
    height: 10px;
    width: 70%;
    padding: 3px;
}

progress-inner {
    background: orange;
    width: 20%;
    height: 100%;
    -webkit-border-radius: 9px;
}

Answer 1

以下只是它的示例.. 增强它。

i = 1;
window.setInterval(
    function(){
        i++;
        $('.progress-inner').css({ width : i + "%" });
    },
    200);