write a Script for progress bar

In this video we will discuss jQuery progressbar widget.
2 simple steps to get the jQuery progressbar
Step 1 : Include a div element with an id on the page
<div id="progressbar"></div>
Step 2 : Find the div element in the DOM and call progressbar() function
$('#progressbar').progressbar();
There are 2 types of progressbars
1. Determinate progress bar - Use when the actual status can be accurately calculated
2. Indeterminate progress bar - Use to provide user feedback when the actual status cannot be calculated
To get a determinate progress bar, set the value option of the progressbar() function to an integer value between 0 and the max.
$('#progressbar').progressbar({
value : 65
});
To get an indeterminate progress bar, set the value option of the progressbar() function to false (boolean)
$('#progressbar').progressbar({	while uploading the file, we don’t know how much time it will take
value : false	boolean value to get indeterminate progress bar
});
Get value for jQuery progressbar from a select element
HTML
Select Percentage :
<select id="ddlPercentage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<input type="button" id="btn" value="Set Value" />
<br /><br />
<div id="progressbar"></div>
jQuery
$(document).ready(function () {
var progressbarDiv = $('#progressbar');
progressbarDiv.progressbar();	using this we can make progress bar structure, but if we want to give how much using below function
$('#btn').click(function () {	to give the value of amount of that progress bar gives
progressbarDiv.progressbar({
value: parseInt($('#ddlPercentage').val())
});
});
});
Display jQuery progress bar value
HTML
Select Percentage :
<select id="ddlPercentage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<input type="button" id="btn" value="Set Value" />
<br />
<br />
<div id="progressbar" style="position:relative">
<span style="position:absolute; left:50%; top:20%" id="progressBar-label">	span is achild element for display the value,in center and upon the div
</span>
</div>
jQuery
$(document).ready(function () {
var progressbarDiv = $('#progressbar');
progressbarDiv.progressbar();
$('#btn').click(function () {
progressbarDiv.progressbar({
value: parseInt($('#ddlPercentage').val()),
change: function () {	wheenver change occurs, get the progreess value using progress bar function
$('#progressBar-label').text(progressbarDiv.progressbar('value') + '%');
}
});
});
});
progressbar progressbar parseint progressbar progressbar change text 3. write a acript for progress bar while uploading file , it shows one progres bar write aprogress bar with fcustomer givern percentage