Progress Bar Widget
Progress bar will provide the information about the progress of a particular process.

Basic Usage
$.domLoaded(function() {
	
	$.get("#prog").widget("progressbar", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
showPercentBooleanOptionalif false, percentage will not be shown in the progress bar. Default is true
defNumberOptionalDefault % of the progressbar
dimJSONOptionalSets dimension of the progressbar
NameDescription
widWidth of the progressbar
htHeight of the progressbar
posJSONOptionalSets position of the progressbar
NameDescription
xHorizontal Position
yVertical Position

Methods
NameDescription
set( new_val )Sets progressbar to a particular %
incr( inc_val )Increases % provided by the input value
decr( dec_val )Decreases % provided by the input value

Progress Bar Widget Examples Example 1
JS HTML
			var pr1;
			$.domLoaded( function() {
				
				$.get("#btn1").on("click", function() {
					pr1.set(parseInt($.get("#val").element().value));
				});				
				
				$.get("#btn2").on("click", function() {
					pr1.incr(5);
				});		
				
				$.get("#btn3").on("click",function() {
					pr1.decr(5);				
				});

				pr1 = $.get("#progr").widget("progressbar", {
					def : 22,
					dim : { wid : 150 },
					showPercent : true
				});		
													
			});
	<body>
	
		<h4>Progress Bar with Set, Incr and Decr functions</h4>
		Value 0 - 100 <input type="text" id="val"/>
		<input type="button" id="btn1" value="Set"/><br/><br/>
		<input type="button" id="btn2" value="Increase by 5"/>
		<input type="button" id="btn3" value="Decrease by 5"/>
		
		<div id="progr"></div>
		
	</body>	
Result