JQuery UI Progress Bar

by Chris LaFrombois

HTML

<div id="progressbar">
    <div class="progress-label">&nbsp;</div>
</div>

CSS

.ui-progressbar {
    position: relative;
}
.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

JavaScript

$(function () {
     var progressbar = $("#progressbar"),
         progressLabel = $(".progress-label");
     progressbar.progressbar({
         value: false,
         change: function () {
             progressLabel.text(progressbar.progressbar("value") + "%");
         },
         complete: function () {
             progressLabel.text("Complete!");
         }
     });

     function progress() {
         var val = progressbar.progressbar("value") || 0;
         progressbar.progressbar("value", val + 1);
         if (val < 99) {
             setTimeout(progress, 100);
         }
     }
     setTimeout(progress, 3000);
 });