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).

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>

<script>

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

</script>

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