.NET Answers

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

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 Related Items:

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully re... Read More >

Introducing Microsoft Visual Basic 2005 for Developers (Pro - Developer)Microsoft Visual Basic 6 is your tool of choice, so why upgrade to the next version of Microsoft Visual Studio .NET? This guide offers a focused, firs... Read More >

Londons Times Funny Food Coffee other Digestibles - Javascript - Water BottlesJavascript Water Bottle is 21oz capacity - 8 inch tall. Sports bottle have become a welcome addition to today's fitness craze. Use sports water bottle while exercising, gardening or watching sports events. Water bottle comes with image on both sides and it is top shelf dishwasher safe.

If you're new here, you may want to subscribe to the mailing list to get notifications of new post and a virtual tour of past topics. Thanks for visiting!

Related Post

• jQuery 1.4 Released
• Do you Need My Help?
• jQuery Expand/Collapse Using Head Tags
• Does jQuery Make Us Lazy?
• jQuery – Dialog

Bookmark to:

Hide Sites

6 Responses to “jQuery Progressbar”