数据抓取进度条

 1 <style type="text/css">
 2      .demo{
 3         padding: 2em 0;
 4         background: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e);
 5           }
 6           .progress{
 7               height: 25px;
 8               background: #262626;
 9               padding: 5px;
10               overflow: visible;
11               border-radius: 20px;
12               border-top: 1px solid #000;
13               border-bottom: 1px solid #7992a8;
14               margin-top: 50px;
15           }
16           .progress .progress-bar{
17               border-radius: 20px;
18               position: relative;
19               animation: animate-positive 2s;
20           }
21           .progress .progress-value{
22               display: block;
23               padding: 3px 7px;
24               font-size: 13px;
25               color: #fff;
26               border-radius: 4px;
27               background: #191919;
28               border: 1px solid #000;
29               position: absolute;
30               top: -40px;
31               right: -10px;
32           }
33           .progress-bar-success{background-color:#5cb85c}
34           .progress .progress-value:after{
35               content: "";
36               border-top: 10px solid #191919;
37               border-left: 10px solid transparent;
38               border-right: 10px solid transparent;
39               position: absolute;
40               bottom: -6px;
41               left: 26%;
42           }
43           .progress-bar.active{
44               animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
45           }
46           @-webkit-keyframes animate-positive{
47               0% { width: 0; }
48           }
49           @keyframes animate-positive{
50               0% { width: 0; }
51           }
52 </style>

1  <div id="progress" class="progress-bar progress-bar-success active" style="width: 0%;">
2         <div id="progress_value" class="progress-value">0%</div>
3     </div>

 1  <script>
 2     var timeout = null;
 3     function doStart() {
 4         document.getElementById("progress").style.width="0%";
 5         document.getElementById("progress_value").innerHTML = "0%";
 6         timeout = window.setTimeout("run()", 300);
 7             }
 8 
 9         function run(){
10         var bar = document.getElementById("progress");
11         var total = document.getElementById("progress_value");
12         if(bar.style.width == "100%" || bar.style.width == "90%" ){
13           window.clearTimeout(timeout);
14           return;
15         }
16 
17         bar.style.width=parseInt(bar.style.width) + 1 + "%";
18         total.innerHTML = bar.style.width;
19 
20         timeout=window.setTimeout(‘run()‘,300);
21         }
22 
23     $(document).ready(function() {
24         //数据生成ajax
25         $("#button_data").click(function () {
26             document.getElementById("state").textContent = ‘执行进度:‘;
27             document.getElementById("result").textContent = ‘执行结果:‘;
28 
29             doStart();
30             //返回执行结果
31             $.get(‘/dataAnalysis/wx_data_als_ajax/‘,function(ret) {
32                  $(‘#result‘).html("执行结果:<br>" + ret);
33                  document.getElementById("progress").style.width="100%";
34                 document.getElementById("progress_value").innerHTML = "100%";
35             })
36 
37         })
38        })
39 
40     </script>