Progress Meter Spec
by Mike Pinkerton
Last Modified 2/24/98
Overview
This document is the engineering details behind the Progress Meter document. It supplements that document with examples and a comprehensive listing of attributes and parent/child relationships.
From the Requirements document:
A Progress Meter is a very simple UI object which displays the percentage complete of a given task, or in the case where the length of a the task cannot be determined, an animation to demonstrate the task is not yet complete.
Syntax
The XUL syntax for the Progress Meter.
|
Tag |
Attributes |
Description |
|
progressmeter |
value |
From 0..100, an integer representing the percentage complete of the task. |
|
mode |
set to "unknown" to get a barber pole. |
|
|
orient |
set to "vertical" to make the progress meter vertical (bar grows upwards, towards the top of the screen). |
|
|
color |
The color of the bar indicating percent of progress |
|
|
background-color |
The background color of the meter, coloring what is not covered by the bar. This style has no effect when the meter is in "unknown" mode. |
Style
Alternating stripes can be configured by modifying the pseudo-style:
:PROGRESSMETER-STRIPE {
color: gray
}
Examples
Here is an example of XUL for a progress meter which observes a broadcaster. Note that the meter observes two attributes of the broadcaster in order to be able to switch into "unknown" mode if necessary. The styles are setup so that the meter is blue, and has yellow stripes in "unknown" mode
<?xml version="1.0"?>
<window xmlns:html="http://www.w3.org/1999/xhtml">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<style type="text/css">
progressmeter { color=blue }
:PROGRESSMETER-STRIPE { color: yellow }
</style>
<window>
<broadcaster id="Browser:LoadingProgress" />
...
<progressmeter>
<observes element="Browser:LoadingProgress" attribute="value" />
<observes element="Browser:LoadingProgress" attribute="mode" />
</progressmeter>
</window>
maintained by Mike Pinkerton (pinkerton@netscape.com)