Using progressbar's configuration option
The progressbar has a single configuration option at the time of writing—the value option. This option is used to set the value, or percentage complete, of the current process. Setting the option at initialization is done using a standard configuration object. Change the final <script> element in progressbar1.html so that it appears like this:
<script type="text/javascript">
$(function() {
var progressOpts = {
value: 50
};
$("#progress").progressbar(progressOpts);
});
</script>Save this as progressbar2.html. The value option takes an integer and sets the width of the inner <div> of the widget to the corresponding percentage. This change will make the widget appear as it did in the first screenshot in this chapter.