It is possible to create a progress bar for long-running scripts using a combination of server-side and client-side scripting.

On the client-side, a "box-within-a-box" object is created and given a unique ID. Client-side javascript causes the box to change widths, and changes the "label" inside the box of the current width as a percentage.

On the server-side, the current progress percentage is tracked and client-side scripts sent to set or alter the progress bar. The key to this method is the Response.Flush method.

Rather than rewrite the code to generate the progress bar each time, I have encapsulated the server and client side code into a portable VBScript class.

View a Demonstration

Get the Code: class | example

Documentation

Quick How-To

Properties:

Name* (r/w)

String. The HTML ID of the progress bar.

example: pBar.Name = "progbar"

result: the name of the progress bar is set to "progbar".

Width (r/w)

Integer. The width of the progress bar, in pixels.

example: pBar.Width = 400

result: the width of the progress bar is set to 400 pixels.

Height (r/w)

Integer. The height of the progress bar, in pixels.

example: pBar.Height = 20

result: the height of the progress bar is set to 20 pixels.

Margin (r/w)

Integer. The margin of the progress bar, in pixels.

example: pBar.Margin = 5

result: the margin around the progress bar is set to 5 pixels.

Caption (r/w)

String. The caption of the progress bar, rendered below it.

example: pBar.Caption = "Processing order..."

result: the caption is set to "Processing order...".

Color (r/w)

Hex color value or color word. The color of the progress bar indicator.

example: pBar.Color = "#FF0000"

result: the color of the progress bar indicator is set to red using a hex color value.

BackColor (r/w)

Hex color value or color word. The background color of the progress bar "box".

example: pBar.BackColor = "#FFFFFF"

result: the background color of the progress bar box is set to white using a hex color value.

BorderColor (r/w)

Hex color value or color word. The border color of the progress bar "box".

example: pBar.BorderColor = "black"

result: the border color of the progress bar box is set to black using a color word.

Percent (r/w)

Integer. The value of the progress bar indicator, as a percentage of total progress.

example: pBar.Percent = 50

result: the progress bar indicator now reads 50% and is half of it's maximum width.

FillWidth (r)

Integer. The current width of the progress bar indicator in pixels.

example: iWidth = pBar.FillWidth

result: the current width of the progress bar indicator is stored in the iWidth variable.

Full (r/w)

Integer or Long. This number indicates the total number of processes which will be tracked by the progress bar. For example, if you are processing every record in a recordset that contains 1000 rows, this number would be 1000.

example: pBar.Full = 100

result: the total which must be added to the progress bar (in order for it to reach 100%) using the Fill method is now 100.

Block (r/w)

Integer. This number indicates how often the progress indicator will be updated and is expressed as a percentage of the complete job.

example: pBar.Block = 3

result: the progress bar indicator will be updated every 3% (roughly).

Methods/Subs:

WriteScript (FirstBar as Boolean)

Write Javascript functions to the client (preferred to use in the HEAD of the document). You only need to do this once per script, setting FirstBar to true. Setting FirstBar to False has no function at this time.

example: pBar.WriteScript True

result: the client-side javascript functions required for the progress bar are sent to the client.

WriteStyle

Write CSS style code for the progress bar.

example: pBar.WriteStyle

result: the client-side CSS code and corresponding HTML will be sent to the client.

Bar (Name, Width, Height, Margin, Full, Block, Color, BackColor, BorderColor, Caption)

Shorthand method for setting all of the available properties.

example: pBar.Bar "progbar", 400, 16, 2, 100, 5, "blue", "#FFFFFF", "black", "Processing order..."

Result: creates progress bar with the name "progbar", 400 pixels wide, 16 pixels tall, with a 2 pixel margin, 100 operations, indicator changes after every 5 percent, indicator is blue, background is white, border is black. Caption is "Processing order..."

WriteBar

Write HTML for the progress bar to the client.

example: pBar.WriteBar

result: <div id="progbar"><div id="progbarfill"></div></div><p>Processing order...</p> will be written to the client.

Fill (IncrementAmount as Integer)

Updates the progress bar to show that IncrementAmount operations have been completed.

example: pBar.Fill 20

result: if the total of un-applied increment amounts is greater than the percentage Block, the progress indicator will be updated to indicate the current percentage of progress.

Clear

Clears the progress bar.

example: pBar.Clear

result: the current width and percentage of the progress bar are reset to 0 and client-side javascript is sent to clear the progress bar display.