<progress>, <meter> elements

The <progress> element is used to represent a “progress meter,” to indicate the completion of a task—downloading a file, for example. It has two attributes: max, which specifies how much work the task requires in total, and value, which specifies how much of the task has been completed. The units are arbitrary and not specified:

<progress value=5 max=20>5</progress>

In supporting browsers, this is replaced with a progress meter graphic (Figure 3.11).

Figure 3.11 <progress> in Chrome (left) and Opera (right). Chrome’s progress meter is slightly animated; Opera’s is static.

<meter> is very similar (many have questioned whether there needs to be two separate elements at all). The spec says that <meter> “represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.”