How to create progressbar widgets in Nedil JS

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.

Name

Type

Must/Optional

Description

showPercent

Boolean

Optional

if false, percentage will not be shown in the progress bar. Default is true

def

Number

Optional

Default % of the progressbar

dim

JSON

Optional

Sets dimension of the progressbar

Name	Description
wid	Width of the progressbar
ht	Height of the progressbar

pos

JSON

Optional

Sets position of the progressbar

Name	Description
x	Horizontal Position
y	Vertical Position

Methods

Name	Description
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

JSHTML
									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