Bootstrap3 前端进度条动态加载

使用bootstrap 3 展现简单的进度条：

html 

　　<!--进度条测试-->
　　<div class="progress test">
　　</div>

我设置的是一个测试，每秒进1%，截至90%停止循环。

 /*测试进度条 */
        var progresstest = window.setInterval(function () {
            var pro = $('.test');
            if (pro.children().length > 0) {
                // console.log("test");
                var proval = $('.test .progress-bar');
                var vl = parseInt(proval.attr('aria-valuenow'));
                if (vl < 90) {
                    proval.attr('aria-valuenow', vl + 1);
                    var p1 = (proval.attr('aria-valuenow'));
                    proval.attr('style', '' + p1 + '%');
                    proval.text(p1 + '%');
                }
                else {
                    //停止循环
                    console.log("进度条结束");
                    clearInterval(progresstest);
                }
            }
            else {
                pro.append("<div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style=' 0%;'> </div >")
            }
        }, 1000);

效果如下：