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.