A Scriptless Progress Indicator for ASP Pages
by Rick Parker


Ever have a webpage that just took too long to process? Users tend to have bad habits of closing windows or clicking their back button and resubmitting forms / links that result in these lengthy processing times, thinking that their request has timed out. And often times if no periodic updates are being sent to their browser their browser will time out.

As a result, developers find themselves in need of a way to present a "Loading, Please Wait�" or similar message to users to hopefully set them at ease and encourage them to wait just a bit longer before giving up. There are many, many ways to accomplish this effect. Almost all of them include the use of client-side scripting, usually in the form of javascript. Still more involve the use of images. The worst of these solutions involve animated images that do not reflect what is truly going on.

Like many others before me, I found myself in the position of needing this kind of progress indicator. I could not, however, find any pre-written solution or example that did not rely on client-side scripting. I work in an environment where partner companies commonly disable scripting on their work machines for security purposes. This, of course, breaks every client-side scripting solution to this problem. But whatever I used had to be automated. How do you automate a splash screen client-side, present the page content when the process is complete, and avoid using client-side scripting? The answer lies with Cascading Style Sheets (CSS).

CSS makes styles available to control the positioning of objects on your webpage. More specifically, it allows us to layer objects on top of one another, effectively hiding the one underneath. Used in conjunction with a properly buffered ASP and incremental pushes to the client browser we can get the effect that we need. I wouldn't want to write a ASP script to handle this every time I wanted to have a progress indicator, however. And I could certainly use it in more than one place throughout my site. So, I've packaged the concept into a functional CLASS object which can be included and used inside of any ASP page that might need it.

Included with this article you will find downloadable source code that includes the class file itself, documentation to help developers use the properties and methods it contains, and a demonstration of its use, appropriately named Demo.asp. These files should be enough to get any developer up and running in no time. There are, however, a few things you should know.

The PorgressIndicator class includes a long list of properties that allow you to control everything from where the progress window is drawn, to how it looks, and the design of every font used in the window. It also contains properties that allow you to manipulate the way the progress window itself functions. And it is included as an ASP file, so all of the source is exposed for you to customize however you see fit.

The class also relies upon your content being packaged into strings. This is because of the wrappers it must place around your content to force the proper positioning needed to make this all work. Once you've got that straight, the component itself is rather easy to use. For example:

Step 1: Create the object and set your properties:

Dim objProgress      
Set objProgress = new ProgressIndicator 
With objProgress 'set properties  
.BaseMessage = "Loading, Please Wait�"
.BaseNotice = "This may take a while. Please be patient."
.Rotate = False
End With               


Step 2: Generate your HTML header as a string and pass it into the start method:

Dim strHeader 
strHeader = "<html><head><title>My Test Page</title></head><body>" 
objProgress.Start( strHeader ) 


Step 3: Continue with your long process, periodically updating the user:

objProgress.Update( "Thank you for waiting." ) 


Step 4: Generate your final content as a string, passing it into the Finish method:

Dim strContent 
strContent = "probably generated this during your lengthy process" 
objProgress.Finish( strContent ) 
Set objProgress = Nothing 

Try it here

Hopefully this helps some of you. Make sure you run through the code before you use it. You may want to customize it before you do. Good luck and happy coding.

-- Rick Parker is a Senior Web Applications Developer at World Access Services Corporation

Download the code that accompanies this article