jQuery tutorial for beginners - jquery ui progress bar

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-ui-progress-bar.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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({ value : false }); 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(); $('#btn').click(function () { 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> </div> jQuery $(document).ready(function () { var progressbarDiv = $('#progressbar'); progressbarDiv.progressbar(); $('#btn').click(function () { progressbarDiv.progressbar({ value: parseInt($('#ddlPercentage').val()), change: function () { $('#progressBar-label').text(progressbarDiv.progressbar('value') + '%'); } }); }); });