Introduction to JQuery Progress Bar
Progress bars are a jQueryUI element. Whereas we know that jQuery is a JavaScript library, which is used in html code and the reason for using the jQuery in an html code is used to easily create or develop UI (user interface) components by javascript. So with the help of jQuery, we can make our website not only more attractive and also more interactive. The Progress bar is also one of the jQuery UI components, which is used to show the task or process completion state in percentage.
We can show progress bar into two forms such as “determinate progress bar” and “indeterminate progress bar”.
- Determinate progress bar- Determinate progress bar we use in a scenario where we can show the exact progress or status of the task. For example numbers of files send, percentage of the data copy, percentage of the file download, etc. As the Determinate progress bar can show progress in the form number percentage like 54%, or the line filled the form from left to right.
- Indeterminate progress bar- indeterminate progress bar we use in a scenario where the exact progress or status of the task is unknown or can not be determined. For example, we cannot determine progress when the request to connect the server proceeds.
Syntax of the progressbar() method
The progressbar() method can be used in two forms −
- $(element, cont). progressbar (option)method
- $(element, cont). progressbar (“action”, params)method
The element for which we need to manage the progress, we can apply $(element, cont). progressbar (opt) method on the html element to and managed in the form of a progress bar. Whereas option is a parameter used for passing the different values to specify how the progress bars to be behavior and appear. For example $( “#elementid” ).progressbar({ value : 30 }), here value is an option and 30 is the provided value for value option.
Similarly, we can pass not only one option, but we can also pass more than one option just each option separated by the comma as given below –
$( selector, context).progressbar({option1: value1, option2: value2….. });
The different options which we can be pass to the progressbar are given below –
- disabled – The disabled option if set to true then it disables the progress bars and false is a default value of disabled.
- max – The max option sets the maximum value for a progress bar. The default value of the max is 100.
- value – The value option used to set the initial value of the progress bar. The default value of value is 0.
Examples of JQuery Progress Bar
The default functionality of progressbar() method –
Next, let’s start some of the examples on the progress bar to understand its functionality. First, we write some examples to see the default functionality of the progress bar without passing any parameters to the progressbar() method. As the progress bar is an element of the ui jQuery, so the first step is to include the jquery external files by specifying to the src attribute of the < script > element.
4.5 (2,795 ratings)
View Course
Program Example #1
<!doctype html>
<head>
<meta charset = "utf-8">
<title> My first jQuery UI Progress Bar example program </title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href = " https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<style>
.ui {
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#pbid" ).progressbar({
});
});
</script>
</head>
<body>
<h1> This is the default functionality of the progressbar </h1>
<div id = "pbid"> </div>
</body>
</html>
Output –
Next, we use value option and pass it 40, which indicates that the progress 40% in the progress bar as given in the below code –
Program Example #2
<!doctype html>
<head>
<meta charset = "utf-8">
<title> My first jQuery UI Progress Bar example program </title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href = " https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<style>
.ui {
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#pbid" ).progressbar({ value : 40
});
});
</script>
</head>
<body>
<h1> This is the default functionality of the progressbar </h1>
<div id = "pbid"> </div>
</body>
</html>
Output –
Next, we set to max and value options as 400 and 40% value respectively in the progressbar method of JqueryUI.
Program Example #3
<!doctype html>
<head>
<title> My first jQuery UI Progress Bar example program </title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<link href = " https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</style>
<script>
$(function() {
$( "#pbid" ).progressbar({
value: 40,
max:400
});
var pb = $( "#pbid" );
function progress() {
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 4000 );
});
</script>
<style>
.ui{
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
}
</style>
</head>
<body>
<h1> This is the example of the progressbar for max = 400 and values = 40% </h1>
<div id = "pbid"></div>
</body>
</html>
Output –
The progress bar starts filling from left to right and stops when it reached 400. If no value provides for the max option then the fill stops at the right end only.
The element for which we need to manage the progress, we can apply $(element, cont).progressbar (“action”, params) method on the html element to managed and perform an action on the progress bar. in the form of a progress bar. The action is a parameter which specified as a string in the first argument. For example $( “#elementid” ).progressbar(‘disable’), here disable option disable the progress bar.
Some of the actions that can be passed, in $(element, cont).progressbar (“action”, params) method are given below –
- destroy – The destroy action to use to removes the progress bar functionality of an element completely and return to the pre-init state of an element. It is a zero-argument method.
- disable – The disable action disables the element’s progress bar functionality. It is a zero-argument method.
- enable – The enable action enables the element’s progress bar functionality. It is a zero-argument method.
- option( option ) – The option( option ) action use to get value from the specified element. It accepts one argument option, which is a String.
- option – The options action use to gets a progress bar option which is in the form of key: value pairs. It is a zero-argument method.
- option( option, value ) – The option( option, value ) action uses to sets the progress bar option value which is associated with the specified option.
- option( options ) – The option( options ) action uses to sets one or more options for the progress bars. It accepts one argument option which is a map to option-value pairs.
- value – The value action used to get the value of options. The value indicates the percentage of fill in the progress bar.
- value( value ) – The value( value ) action use to set a new value for percentage to be filled in the progress bar. It accepts one argument value which is number.
- widget – The widget action used to get the element on which the progress bar is applied. It is a zero-argument method.
Next, we see some examples of the progress bar with some action which are mention above. Lets see the below program for progressbar( ) method with disable( ) and option( optionName, value ) action.
Program Example #4
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> My first jQuery UI Progress Bar example program </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#pbid1" ).progressbar({
value: 40
});
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar({
value: 40
});
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() {
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 400 );
});
</script>
<style>
.ui {
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
}
</style>
</head>
<body>
<h1> This is the example of the progressbar for Disable action </h1>
<div id = "pbid1"></div><br>
<h1> This is the example of the progressbar for max and value action </h1>
<div id = "pbid2"></div>
</body>
</html>
Output –
The above progress bar is disabled that’s why it is not showing up the progress and the below progress bar set up the max and value option with some values, so the progress in the form of fill showing from left to right.
Progress bar element manage events –
In addition to the above, the progress bar can be managed by the event as well. The jQuery UI provides event method, the event gets triggered for a particular event. Some of the events which can be used to manage progress bar are given below –
- change(event, ui) – Whenever progress bar value changes or progress changes this event get triggered.
- complete(event, ui) – When the progress ar reaches the end or reaches the maximum value this event gets generate.
- create(event, ui) – Whenever progress bar is created this event gets triggered.
Next, write some of the examples of the above event action. The following example demonstrates the event method usage during progress bar functionality. This example demonstrates the use of events to change and complete.
Program Example #5
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> My first jQuery UI Progress Bar example program </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar({
value: false,
change: function() {
pl.text(
pb.progressbar( "value" ) + "%" );
},
complete: function() {
pl.text( "Loading Completed!" );
}
});
function progress() {
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
<style>
.ui-widget-header {
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
.progress-label {
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
</head>
<body>
<h1> This is the example of the progressbar with event </h1>
<div id = "pbid">
<div class = "pbc">
Loading...
</div>
</div>
</body>
</html>
The output of the above program is in the sequence of execution showing below –
The progress bar starts filling from left to right and stops when it reached the end.
Conclusion
1. Progress bars are a jQueryUI element.
2. The progress bar is used to show the task or process completion state in percentage.
3. The progressbar()method can be used in two forms −
- $( element, cont ). progressbar (option ) method
- $( element , cont ). progressbar ( “action”, params )method
4. The different options which we can be pass to the progressbar( ) method are –
disabled
- max
- value
5. Some of the actions that can be passed, in $( element,cont).progressbar ( “action”, params ) method are –
- destroy
- disable
- enable
- option
- option( option, value )
- option( options )
- value
- value( value )
- widget
6. The event which can be used to manage progress bar is given below –
- complete( event, ui )
- create( event, ui )
- change( event, ui )
Recommended Articles
This is a guide to JQuery Progress Bar. Here we discuss the JQuery Progress Bar methods and Examples with the syntax and output. You may also have a look at the following articles to learn more –
