[Table of Contents] [Previous: The Tab Widget] [Next: Checkbox (Tri-State)]

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.