How to Work with Progressbar in CSS3 - dummies

How to Work with Progressbar in CSS3

By John Paul Mueller

Users are impatient, and sometimes a process takes a while to complete. A progress bar makes it possible for the CSS3 developer to keep the user informed about the progress of a task.

Modern programming strategies try to keep the user from waiting at all by performing longer tasks in the background, but sometimes a user can’t proceed until the task is done. This is the time you need to rely on a progress bar to keep the user from attempting to stop the process before it completes.

The following example shows how to use a progress bar. In this case, the progress bar is updated through a timing loop. Each time the timer expires, the progress bar is updated, and the timer is reinstituted.

The result is that the progress part indicator moves from left to right and that the timer eventually stops when the indicator moves all the way to right. (You can find complete code for this example in the Chapter 06Widgets folder of the downloadable code as Progressbar.HTML.)

// Configure the progress bar.
 $("#Progress").progressbar({value: 0});
// Create a variable to hold the timer object.
var Timer;
// Create a variable to hold the total timeout.
var Timeout;
function StartTimer()
 // Initialize the timeout.
 Timeout = 0;
 // Set the progress bar maximum value.
 "option", "max", parseInt($("#StartValue").val()));
 // Create the timer variable.
 Timer = window.setTimeout(UpdateTimer, 100);
function UpdateTimer()
 // Get the maximum value.
 var MaxTime =
 $("#Progress").progressbar("option", "max");
 // Check for the end of the timing cycle.
 if (Timeout >= MaxTime)
 // Update the Timeout value.
 Timeout += 100;
 // Update the percentage completed.
 // Set the progress bar value.
 $("#Progress").progressbar("value", Timeout);
 // Create the timer variable.
 Timer = window.setTimeout(UpdateTimer, 100);

The first task is to create the progress bar itself by calling progressbar(). Notice that you must provide an initial value as input. However, the progress bar configuration isn’t complete — the call to StartTimer() later will perform some additional configuration tasks.

The StartTimer() function is called when the user clicks the Start Timer button on the form. This function initializes two global variables. Timer is a timer object used to animate the progress bar. Timeout is the current elapsed time in milliseconds.

This function also configures the max option for the progress bar. The indicator is a percentage of the current value and the max value properties. The maximum value is provided by the user through an <input type=”text”> control, StartValue.

Whenever Timer expires, it calls UpdateTimer(). UpdateTimer() obtains the maximum time value from the progress bar and places it in MaxTime. It then verifies that Timeout is less than MaxTime. When Timeout finally reaches MaxTime, the progress bar has reached 100 percent and it’s time to stop the timer.

The next step is to update Timeout to the next value. Every iteration advances Timeout by 100 milliseconds.

After updating Timeout, the example updates the onscreen percentage, which is stored in a <span> with an id of PercentDone. It also updates the progress bar’s value attribute so that the bar moves to the next position.

A timer fires only once. To create the next loop of the iteration, the example must reset Timer. When the next 100 millisecond wait is over, UpdateTimer() is called again and the process begins anew.