Progress bar

by Ratan Paul

HTML

<div id="progressbar"><div class="progress-label">Loading...</div></div>
<br />
<button id="progress">Start</button>

CSS

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

JavaScript

$(function() {
    $('#progress').button();
    $( "#progressbar" ).progressbar();
    $('#progress').click(function(){
        var progressbar = $( "#progressbar" ),
            progressLabel = $( ".progress-label" );
      progressLabel.show();
      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, 50 );
           }
        }
        setTimeout( progress, 10 );
    });
});