• Video Tutorial on JQuery UI Progress Bar

HTML

<div id="progress_bar"></div>
  <button id=b1> + </button> <button id=b2> - </button>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#progress_bar" ).progressbar({
  value: 60,
  max:100,
  min:0
});
////////////////
/////////////////
$("#b1").click(function(){
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );
present_value=present_value + 10;
$( "#progress_bar" ).progressbar( "option", "value", present_value );
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );

$("#progress_bar")
    .children('.ui-progressbar-value')
    .html(present_value.toPrecision(3) + '%')
    .css("display", "block");

})
///////////////
////////////////
$("#b2").click(function(){
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );
present_value=present_value - 10;
$( "#progress_bar" ).progressbar( "option", "value", present_value );
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );

$("#progress_bar")
    .children('.ui-progressbar-value')
    .html(present_value.toPrecision(3) + '%')
    .css("display", "block");
})
///////////////
})
</script>