jquery ui progress bar

Suggested Videos
Part 80 - jquery range slider
Part 81 - jquery tooltip widget
Part 82 - jquery tooltip from database



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') + '%');

            }

        });

    });

});