Javascript 自动刷新divjquery+；进度条加载器

我想在自动刷新脚本上添加一些进度条

下面是脚本：

  function update() {
  $("#warning").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'result.php',
    timeout: 3000,
    success: function(data) {
      $("#div_result").html(data);
      $("#warning").html(''); 
      window.setTimeout(update, 20000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#warning").html('Timeout contacting server..');
      window.setTimeout(update, 20000);
    }
});
}

$(document).ready(function() {
    update();
});

---

在“暂停”（20秒）期间，我想显示一个进度条。你有什么想法吗？

只需在update（）之前放置函数progressStatrt（20）

CSS:

#progressbar {
      background-color: black;
      border-radius: 13px; /* (height of inner div) / 2 + padding */
      padding: 3px;
    }

    #progressbar > div {
       background-color: orange;
       width: 0%; /* Adjust with JavaScript */
       height: 20px;
       border-radius: 10px;
    }

HTML

<div id="progressbar">
      <div></div>
    </div>


<a id="aStart">START</a>

---

当然，只需添加一个假的插件，可能有可用的插件，如果不是更新的浏览器不支持

元素，您所要做的就是在循环中推进它，运行20秒

var timeInterval;
var maxSec=0;
var curSec=0;


$(function () {
    $('#aStart').click(function(){
        progressStatrt(20)//sec. for pause
    })    
});

function progressStatrt(pauseDurationSec)
{
    maxSec=pauseDurationSec;
    timeInterval= setInterval(function(){
        progessSet()
    }, 1000);
}    

function progessSet()
{
    curSec++;
    var proc=100*curSec/maxSec;
    $('#progressbar div').width(proc+'%');

    if(curSec>=maxSec) progressStop();
}
function progressStop()
{
    clearInterval(timeInterval);
}