Examples of Using Progress Bars

This section includes examples of different ways to use progress bars.

Incrementing a Progress Bar

Here is a typical use of progress bars. We use a counter (timer) to steadily increment the percentage of fill in the progress bar:

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

Progress : <div id=progressbar></div>


$("div#progressbar").progressbar ();

var value = 0;
var timer = setInterval (function ()
  $("div#progressbar").progressbar ("value", value);
  if (value > 100) clearInterval (timer);
}, 10);


The callback function specified in setInterval (delay, callback) is called at the end of each specified time period (here, every 10 milliseconds). clearInterval (timer) prevents this callback function from being called once the percentage reaches its maximum value of 100 (Figure 6-4).

The progress bar is completely filled

Figure 6-4. The progress bar is completely filled

Performing Processing at Different Stages of Completion

In addition to incrementing the progress bar, it is possible to perform processing at particular stages of completion. Let’s use this functionality to update a numerical display of percent complete every time there is a change in the percent filled (shown in Figure 6-5). This is done using options.change ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.