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


Last modified on January 16, 2013. This entry was posted in Uncategorized and tagged , , , , , , . Bookmark the permalink.

5 Responses to Bootstrap progress bar update using jQuery/AJAX

  1. Pingback: Long Tail Optimization, the numbers of a happy accident | ElfGA - Alien Technology BlogElfGA – Alien Technology Blog

  2. Paul Harley says:

    Really useful info. I’m a backend person, but had to write some front-end with an updating progress bar, and your example here really helped me. Thanks very much for sharing it.

  3. That’s nice approach, but you may find useful to see my blog post on how to display task progress using the HTML progress element and ProgressEvent W3C recommendation: Progress Indicator for Ajax requests

  4. Bhumi says:

    Awesome blog having such a valuable content.

  5. Anonymous says:

    sdafsdafsadf

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>