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.
	align	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/TR/REC-html40">
<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>