jQuery Progressbar

arct-013 Once you venture into the land of AJAX you’ll soon discover the need to let your user know that some work is taking place in the background.  If you can, you’ll want to let them know just how long that work will take before they can continue.  For that, jQuery has the progress bar.

Just like most of the other jQuery UI widgets, you’ll need to make sure you have a theme created.  You can see some of the earlier posts on jQuery UI to find out how to do that.

To use the progress bar, you’ll need some HTML.

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

yep.  That’s all you need.  The progress bar will size itself to the containing div.

Next, you’ll need some jQuery code.  For now we’ll go with something simple

$(function() {
    $("#progressbar").progressbar({ value: 37 });
});

 

Which will render a progress bar 37% complete

image

Of course a progress bar is suppose to show some status.  So let’s simulate some status using setTimeout()

$(function() {
$("#progressbar").progressbar({ value: 0 });
setTimeout(updateProgress, 500);
});

function updateProgress() {
  var progress;
  progress = $("#progressbar")
    .progressbar("option","value");
  if (progress < 100) {
      $("#progressbar")
        .progressbar("option", "value", progress + 1);
      setTimeout(updateProgress, 500);
  }
}

Here we are calling the updateProgress function every 1/2 second, retrieving the current value of the progress bar and incrementing it by one if it has not reached 100% done yet.

If you need them, there is an event to handle when the progress bar has been changed and methods to disable, enable, and destroy the progress bar.

It really is a pretty simple control.

 

Other post in jQuery

Related Post

  • jQuery TabsjQuery Tabs While the TabControl provided by Microsoft in the AJAX toolkit is probably a bit easier to use, the Tabs in jQuery are not much harder to implement and give us a bit more flexibility. Here are th...
  • jQuery – Sliders (scrollbars to the rest of us)jQuery – Sliders (scrollbars to the rest of us) Scrollbars are a fundamental GUI widget that exist on every operating system.  With the browser continually morphing into it's own operating system it isn't surprising that there are several ...
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of ab...
  • jQuery – DropjQuery – Drop Last week we took a look at how to make an element draggable.  This isn't of much use unless we can drop it. Fortunately, making an item droppable is about as easy as making it draggable. $...
  • jQuery Looks like XPathjQuery Looks like XPath So far in our examination of jQuery we've seen how to select an ID, select a set of elements by tag name and select a set of elements by their class.  But what if we wanted to select a set of elem...
  • http://dotnet9.cn Jack

    This is easy to implement following this post. but I like green progress bar instead of gray one

    • Dave

      So, change the jQuery theme.

  • Pingback: Dew Drop - May 21, 2009 | Alvin Ashcraft's Morning Dew

  • Pingback: The Technology Post for May 21st - Jason N. Gaylord's Blog

  • Alex

    This is fine but it’s not really showing the progress of whatever’s happening in the background. Kind of defeats the purpose of a progress bar, no?

  • Mitch

    Not sure how you can say that Alex. It shows what ever status you make it show. In the case of this code, it shows the status of time elapsing. In your code it would show whatever you want.

  • http://twitter.com/viking_olof/status/304485627632709632/ @viking_olof

    jQuery Progressbar http://t.co/yNE8BFgmgu #jquery