Home » jQuery » jQuery Progressbar

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 – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if […]
  • jQuery Expand/Collapse Using Head TagsjQuery Expand/Collapse Using Head Tags I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from. The task started […]
  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple […]
  • jQuery, Each() and Async GetsjQuery, Each() and Async Gets One of the things to keep in mind when using jQuery is that nothing is a blocking call.  Sure, there is a certain sequence to when things operate.  But, to be safe, you should […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.

2 Pingbacks/Trackbacks