Saturday, June 9, 2012

How to Use JQuery UI Progress Bar

Hi! As you know, we wrote something about JQuery before. We'd talked about where and how to use it. 

In this article, we're going to learn using progress bar we all know. For using it, have to include the library about this. Like i said, this article is about showing load progress using JQuery UI.

I guess that we all need to load progress while our pages was loading on. All of expert of software think about that is the best way ever. For that reason, this is indispensable for us :)

Well, we'd talked about the libraries. If you learn how to use those, you can visit Jquery web site

Your Html Page should be like:

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

When the script stars and loads, progress bar will work on the div layer which's id is progressbar.

This is my jquery document:

$(document).ready(function() {
 var count = 0;
 setInterval(function() {
  count = count + 0.5;
   value : count         
 }, 10);

As you see, setInterval function is counting our count and then load the page. I used to 0.5 value. If you want to load faster or slower, can change the 0.5 value, namely value of count.

If you want to see how the demo works, you can visit this page.

Just remember that is an open source project and if you see the code, you can see the code, if you want to get the code, you can get to code also. And libraries we used on the script are here.

We'll see you guys next article!


  1. thanks a lot. Is there any other way i can bind this with file upload in php?

  2. its good but i would like to add this progress bar to my android.can u help me?

    1. this one is different actually. If you want to publish an android app with using jquery libraries, you should check this site out. And I can recommend you to view "phonegap"

  3. How can I reinitialize it? To be in a loop?

    1. did you try to define an event, click or something else? when clicked, the progress bar will start.