Bootstrap progress bar update using jQuery/AJAX

One of the web apps I’ve worked on involved parsing and analyzing quite a bit of data from various sources. An initial prototype in PHP simple executed the ~20-30 second routine before displaying a page stating the task was done. With the move to an app engine, I pushed the task into a thread to avoid the long page load. Now the problem was not knowing when it had completed instead of waiting with no feedback! Sounded like a job for some kind of progress bar to me. I whipped one up using jquery and bootstrap and have been quite pleased with the result.

First, the server side app was modified with an ‘update-progress’ entry point that returns a simple text representation of the completion, like “53.12”. Just one number, so no need for JSON or XML, just a simple number is adequate.

The HTML markup is straight from the bootstrap help page. I decided to turn on the animated striped look while the server does it’s work.

<div class="progress progress-striped active" id="progressouter">
   <div class="bar" id="progress"></div>
</div>

The javascript is a standard setInterval to repeatedly query the value from the server via an AJAX (though not so much X) request every 1000ms and update the CSS width of the progress bar. I wanted to stop querying the server once the task was completed, so I test to see if the progress is really close to 100% and remove the timer object, as well as turning off the ‘active’ stripe animation and replacing inner html. The timer is wrapped in a document-ready test to verify the DOM is available before attempting to access it.

$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
    $.get("/app/update-progress", function(data){
      /* update the progress bar width */
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');

      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});

And that’s all there is to it.  If you found this useful or have any comments/question, let me know