jQuery progress bar widget

The progressbar widget is used to create a progress bar. It informs the user about the progress of a task. For example:

Progressbar Widget Properties

The widget has several properties that help you configure it:

value : the current value of the progress bar. For example:$(‘#progress’).progressbar({value:33})

By default, the property value is 0 and cannot be higher than the property valuemax

It can also take a boolean value: if the value is false, then the progressbar has an undefined scale of values.

• disabled : disables the progressbar if set to true ( $(‘#progress’).progressbar({disabled:true, value:25})). The default is false.
• max : Specifies the maximum value of the progress bar. For example, $(‘#progress’).progressbar({max:200}). The default value is 100.

Widget Methods

The progressbar has the following methods:

• progressbar(“disable”): makes the progressbar unavailable:$(“#progress”).progressbar(“disable”);
• progressbar(“enable”): makes the progressbar available for interaction
• progressbar(“destroy”): removes the progressbar widget functionality from the element
• progressbar(“widget”): returns a jQuery object representing the widget ( var widget = $(“#progress”).progressbar(“widget”);)
• progressbar(“option”): allows you to get or set the values ​​of the progressbar properties:

<div id="progress"></div>
<p><button id="getVal">Get value</button></p>
<p><input type="text" id="val" /> <button id="setVal">Set value</button></p>
<script type="text/javascript">
$(function(){
        
    $('#progress').progressbar({value:25});
    $('#getVal').button().click(function(){
        // get value
        var val=$('#progress').progressbar('option', 'value');
        alert("Indicator value: "+val);
    });
    $('#setVal').button().click(function(){
        // set value
        var val = parseInt($('#val').val());
        if(val>100 || val<0){
            alert('Invalid value entered');
        }
        else{
            $('#progress').progressbar('option', 'value', val);
        }
    });
});
</script>

With the help of the first button, we get the value, passing as the second parameter after “option” the name of the property to be obtained. And with the help of the second button, the progressbar property is set to the value entered in the text field – we pass it as the third parameter of the method.

Additionally, the widget implements the progressbar(“value”) method, which returns the value of the value. By passing a numeric value as the second parameter, we can set the indicator value:$(‘#progress’).progressbar(‘value’, 35);

Widget Events

Three events are defined for the progressbar:

change(event, ui): fired when the value of the progress bar changes, for example

$('#progress').progressbar({value:25, change: function(event, ui){
            console.log('value has changed');
        }
    });

complete(event, ui): fired when the value of the progressbar is equal to max. For example:

$('#progress').progressbar({complete: function(event, ui){
            console.log('value is equal to maximum');
        }
    });

create(event, ui): raised when the widget is created