jQuery UI – Making Things Look Slick: Progressbar

Users want to be informed. They want to know whether a page is loading, an operation is being performed, or if it’s stuck. A progress bar is a classic tool for communicating this information to the end user. It’s important to keep in mind that the value of the progress bar displayed should be somewhat accurate, or you’ll still anger your users, at which point they may leave your page.

The progressbar widget is fairly simple in comparison with the other widgets studied so far, and only accepts two options, as summarized in Table 8-14.

Expectedly, to change the “percent finished” of the progress bar, change the value option. The following example shows a progress bar that slowly increments to 100 percent after page load:

<!DOCTYPE html>



<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />

<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>

<script src=”js/jquery-ui-1.8.13.custom.min.js”></script>


$(function() {

$( “#bar” ).progressbar({ value: 0 });

setTimeout( updateProgress, 500 );


function updateProgress() {

var progress;

progress = $( “#bar” ).progressbar( “option”,”value” );

if (progress < 100) {

$( “#bar” ).progressbar( “option”, “value”, progress + 1 );

setTimeout( updateProgress, 500 );






<div id=”bar”>




Code snippet is from progressbar.txt

Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc

Leave a Reply

Your email address will not be published. Required fields are marked *