Bootstrap3 前端进度条动态加载

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

html 

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

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

 1  /*测试进度条 */
 2         var progresstest = window.setInterval(function () {
 3             var pro = $('.test');
 4             if (pro.children().length > 0) {
 5                 // console.log("test");
 6                 var proval = $('.test .progress-bar');
 7                 var vl = parseInt(proval.attr('aria-valuenow'));
 8                 if (vl < 90) {
 9                     proval.attr('aria-valuenow', vl + 1);
10                     var p1 = (proval.attr('aria-valuenow'));
11                     proval.attr('style', 'width:' + p1 + '%');
12                     proval.text(p1 + '%');
13                 }
14                 else {
15                     //停止循环
16                     console.log("进度条结束");
17                     clearInterval(progresstest);
18                 }
19             }
20             else {
21                 pro.append("<div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0%;'> </div >")
22             }
23         }, 1000);
JS 代码部分

效果如下：

 

posted @ 2020-07-09 14:24  老丹点赵  阅读(903)  评论(0)  编辑  收藏  举报