HTML and CSS Reference
In-Depth Information
is the maximum number of steps in a task, and
value
is the current step that the user is
on.
Let's look at an example:
<progress max="3" value="1">Step 1 of 3</progress>
This defines being at the first of three steps. In a browser that supports this element,
the display may look like
Figure 4-24
.
Figure 4-24.
The
progress
element as rendered in a supporting web browser (Opera in this
case)
Note
For those browser's that don't support this element, it is important to put some
meaningful text between the element's tags, since this will get displayed in cases where
the progress element is not supported (
Figure 4-25
).
Figure 4-25.
In a web browser that does not support the
progress
element, the text content
between the element's tags gets displayed instead.
Displaying a gauge
the display of the progression through steps in a task, while the
meter
element is for
the display of a gauge—that is, a specific value within a known range. It could be used
to show how much hard drive space is remaining or how much inventory is left.
Figure 4-26.
The
meter
element as it appears in Google Chrome
The
min
and
max
attributes set the minimum and maximum ends of the range, while
the
value
attribute sets where in the range the gauge is. The element also has a good
number of attributes that are used for schematic purposes to ascertain the meaning be-
hind where a particular value is in a set range. The
optimum
,
low
, and
high
attributes
allow segmenting of the range into regions. This can be used by the web browser to dis-
Search WWH ::
Custom Search