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
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
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 meter element ( Figure 4-26 ) may look identical to the progress element ( Fig-
ure 4-26 ) , but there is an important schematic difference. The progress element is for
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