Chapter 6. Progress Bars

Progress bars allow you to view the progress of a task, such as transferring a file. jQuery UI can handle them easily.

Basic Principles of Progress Bars

Suppose we want to write the HTML code to display the progress bar shown in Figure 6-1. This is a container that will gradually fill in to indicate the progress of a task (for the moment, it is almost empty and will start to fill in from the left side).

Progress bar

Figure 6-1. Progress bar

As required by jQuery UI, we represent the progress bar with a <div> element (shown in bold):

<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 ();


This indicates that each <div> element corresponding to the progress bar is managed by the jQuery UI progressbar () method.

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.