jQuery UI Progress Indicator

Widget Factory Example

by Shaun Ellis

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<div id="notice" class="alert-info"></div>
</body>

CSS

.alert-info {
  display: block;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

JavaScript

$.widget( "pul.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    reset: function() {
      console.log("foo");
      this._setOption( "value", 0 );
    },
    refresh: function() {
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
            this.reset();
        }
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

// draw plugin to dom >>>
var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            $( "#notice" ).text( "Complete!" );
            $( "#notice" ).show().fadeOut( 2600, "swing" ); 
        }
    })
    .data( "pul-progressbar" );

var i = 0;                     
function progressLoop () {          
   setTimeout(function () {         
      if (i <= 100) {            
        bar.option( "value", i );  
        i=i+10;
        progressLoop();
      }      
   }, 500);
}

progressLoop();