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;
  $('#progressbar').progressbar({
   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!