Blog RSS feed
Price: $12.99
Works in Dreamweaver MX and higher, all server models
Progress bars are a fixture in applications and web applications. On a web page, when an operation might be doing some work, you want to give the user a visual cue that the page is doing something. For example, when uploading a file, the page appears to "freeze" until the file is uploaded. To this end, I've created a progress bar that can be attached to any event on your page, such as a form onsubmit, link onclick, button onclick, page onload, or other event. In addition, another behavior allows you to stop the bar. This is useful for AJAX operations, where the page is never reloaded, but time-consuming operations might be occuring.
The TFM Progress Bar does not show actual progress of an operation, but rather gives a visual indication with an animated bar. Other bars I've seen have been made in Flash or using animated gifs, however both have some disadvantages. This one uses JavaScript and can be attached to any html element that has an ID attribute, such as a <p> tag, <div> tag, <span> tag, or <a> tag.
TFM Progress Bar
The first behavior initializes and starts the bar. To use the behavior, first decide which event you want to attach the bar to. Some useful operations are:
- File uploading: attach to the form onsubmit when the user uploads a file.
- Page redirection (clicking a link): attach to the link onclick event when redirecting or opening a popup.
- AJAX operations: attach to the AJAX calling mechanism and stop in the AJAX callback function.
- Credit card validations: attach to the form onsubmit when try to reach the gateway
To apply the extension to any HTML page (or .cfm, .asp, .aspx, .php or any other valid web page) follow these simple steps:
- Open the Behaviors panel.
- Select an html element/event in Design view.
- Select Tom-Muck.com > TFM Progress Bar from the behaviors panel. You'll see this dialog box:
- Fill in or accept the following values:
The Container ID should be chosen from the dropdown list. The list shows all elements on the page that have an ID attribute.
The ID of Progress Bar Element is the second field and is not user-editable. This is the ID given to the element after it's creation. This is useful if you want to give the element some CSS properties, although many of them are set by the behavior.
The Number of Segments figure is an integer of the total number of segments that the progress bar will contain. A typical progress bar might have 15-30 segments.
The Segment Width value is an integer of the pixel width of each segment in the bar. A typical segment width might be 10-20, which would give you a progress bar of 150-300 pixels if your bar contains 15 elements.
The Height value is an integer value of the pixel height of the bar. A typical height might be 8-20 pixels.
The Speed value is an integer ranging anywhere from 25-1000 or more. The value is number of milliseconds between each "frame" of the bar. A typical value would be 100, which would allow the bar to update 10 times a second. A value of 1000 would allow the bar to update once per second.
The Color value has to be entered as a 6 character hex value with the preceding # sign, and is the color of the first segment in the bar. A handy color picker is included to format the value properly. Values entered in other formats will cause the calculations to be off.
The Border value is the border of the progress bar element, and can be entered as any valid CSS border, such as "1px solid black", "0", or "2px dotted #ccc".
The Segment Border value is the border of the individual bar segments, and can be entered as any valid CSS border, such as "1px solid black", "0", or "2px dotted #ccc". Segment borders are applied to the left border of each segment, which gives the effect of "blocks" within the bar.
The Segment Trail Length value is an integer of the number of segments that will contain color, which gives the animated effect of the bar. The segments will get progressively lighter (or darker) until the trail length value is reached. A typical value is 6-8, assuming a 15-20 segment bar.
The Color Multiplier is a value to multiply the individual color by for each succeeding segment. A value of 1 would make no change to the color. Numbers should be at or around 1, with lower numbers causing the color to darken (such as .96, .93, .9, etc) whereas higher numbers will cause the segments to lighten (such as 1.03, 1.05, 1.1, etc).
TFM Progress Bar End
The second behavior stops the progress bar from running. To apply it, simply select your trigger element/event, such as a link, and choose Behaviors > Tom-Muck.com > TFM Progress Bar End. The following dialog box will appear:
The dialog box will show all progress bar instances on the page. Choose the one you want to end and click OK.
The progress bar works in modern browsers (Firefox, IE 6, Safari). Due to a limitation of Safari, it does not show on a form submit of Safari, but does work in all other single page operations.
The following links show the progress bar in action. Keep in mind, the color, size, speed, and other aspects are user-defined.
View a live demo. Stop demo
View a live AJAX demo.
