Figure 6-2 shows an example of the HTML generated by jQuery UI once modified by the progressbar () instruction (this code was recovered using the Firebug extension in Firefox).

Again, it is possible to use CSS classes of elements to customize the display. For example, if we change the ui-progressbar CSS class associated with <div> elements, we get a new appearance for progress bars, such as that shown in Figure 6-3, with a height of 10 pixels:

<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 />

<style type=text/css>
  div#progressbar.ui-progressbar {
    height : 10px;
  }
</style>

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

<script>

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

</script>