O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying an Animated Progress Bar

NN 6, IE 5

Problem

You want to show a progress bar while a long, repetitive script operation takes place.

Solution

Components of this solution consist of a minimum of HTML, a style sheet to give the HTML its look and feel, and scripts to control the display and animation of the progress bar. The HTML included in the page consists of a group of nested div elements, each of which makes up a separate visible portion of the user interface: the wrapper around the entire progress bar, the label text, the empty bar, and the colored bar that expands to the right during the animation:

<div id="progressBar">
    <div id="progressBarMsg">Calculating...</div>
    <div id="sliderWrapper">0%
        <div id="slider">0%</div>
    </div>
</div>

The progress bar is hidden when the page loads, and the rest of its look and feel is controlled by an extensive style sheet described in the Discussion. You can customize the appearance by modifying the style sheet.

Apply the script shown in Example 15-5 to the progress bar. The sequence used to control the progress bar consists of calls to the showProgressBar( ) , calcProgress( ), and hideProgressBar( ) functions. See the Discussion about how to repeatedly invoke calcProgress( ) to convey motion to the bar. The page must also include onload event handler calls to two initialization routines: the DHTML API library (Recipe 13.3) and the initProgressBar( ) function:

<body onload="initDHTMLAPI( ); initProgressBar( )">

Discussion

Despite the simplicity ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required