自动刷新div jQuery +进度栏加载器

Question

I would like to add some progress bar on my auto-refreshing script.

Here the script :

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

During the "pause" (20sec) I would like to display one progress bar. Do you have an idea ?

Answer 1

Just put function progressStatrt(20) before update();

http://jsfiddle.net/77udsv9o/3/

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>

JS

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