We have discussed about different jQuery UI plugins like datepicker, accordion and autocomplete in the previous posts. We will discuss about another interesting plugin in this post, the Progressbar plugin
The progressbar is designed to indicate the percentage of completeness for a process. jQuery UI provides a plugin to incorporate this functionality in your applications. We can classify progressbar into two types, determinate and indeterminate . We use determinate progressbar in our application if the actual status can be calculated otherwise indeterminate progressbar is used.
Contents
Progressbar Plugin Options
In this section, we will discuss about available options to customize the progressbar plugin. We have used many of these options in the Progressbar plugin in Action section.
The above table briefly describes the available options to customize the progressbar plugin.
Progressbar Plugin Methods
In this section, we will discuss about different methods associated with jQueryUI progressbar plugin. We have used many of these methods in the Progressbar plugin in Action section.
The above table briefly describes the different methods used to customize the progressbar plugin.
Progressbar Plugin Events
In this section, we will discuss about different events associated with jQueryUI progressbar plugin. We have used many of these events the Progressbar plugin in Action section.
The above table briefly describes the events associated with progressbar plugin.
Progressbar Plugin in Action
In this section, we will try different examples to explore the uses of jQueryUI Progressbar plugin.
Default Functionality
The following example demonstrates the default functionality of a determinate progress bar. In this example, you can see an integer value is specified to demonstrate the progressbar of a determinate process.
progressbar-determinate.html
<!doctype html>
<html>
<head>
<title>jQuery UI Progressbar - Default Determinate</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 60
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
You will see the following output in browser.
The following example demonstrates the default functionality of a indeterminate progress bar. In this example, we set the value to false to demonstrate progressbar of an indeterminate process.
progressbar-indeterminate.html
<!doctype html>
<html>
<head>
<title>jQuery UI Progressbar - Default Indeterminate</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: false
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
You will see the following output in your browser.
Progressbar with Custom Label
The following example demonstrates the progressbar plugin with custom label.
progressbar-customlabel.html
<!doctype html>
<html>
<head>
<title>jQuery UI Progressbar - Custom Label</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
.ui-progressbar{
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progress-bar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Loading Completed!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 2 );
if ( val < 99 ) {
setTimeout( progress, 90 );
}
}
setTimeout( progress, 2500 );
});
</script>
</head>
<body>
<div id="progress-bar"><div class="progress-label">Loading...</div></div>
</body>
</html>
You will see the following output in the browser.
In this example, you can see the use of change and complete events. I hope you understood the basic concepts of progressbar plugin and you can try using all the options, methods and events mentioned in this post.
That’s all for now and you will see more jQuery plugins in the coming posts.