You are currently viewing a snapshot of taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to, please file a bug.

Progress Meter

Feature Owner
Eric Vaughan

A progress meter is a horizontal or vertical strip that can be used to measure progress as a percentage. It is declared using the progressmeter tag.

A progress meter can be in one of two modes: normal and undetermined. The mode attribute can be used to switch between the modes.

In the normal mode (the default), the progress meter fills in a certain percentage with its foreground color (as specified using the CSS color property). This percentage value can be set using the value attribute. The attribute should be given a value between 0 and 100.

<progressmeter value="50"/>

In the undetermined mode, the progress bar uses a barber-pole appearance that animates to indicate that the amount of progress is indeterminate. The progress meter uses two colors in order to draw the barber pole effect, and this second color can be specified using the color property with the :progressmeter-stripe pseudoelement.

:progressmeter-stripe {
	color: #BBBBCC;

The progress meter can be aligned horizontally or vertically using the align attribute. This should move into CSS. When the bar is aligned horizontally (the default), the bar fills in from left to right. When it is aligned vertically, the bar fills in from bottom to top.