使进度条移动

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);