HTML and CSS Reference
In-Depth Information
Figure A-4
A series of <meter> elements, showing the variations in color states.
Progress Bars
Also new in HTML5, the
<progress>
element is similar to the
<meter>
element; however, this element
should be used to represent a value that is changing instead of a value that has already been measured. This element
is commonly used in applications such as file upload forms where you want to let the user track the progress of the
upload.
The
<progress>
element only has two attributes: a
max
and a
value
.
The
max
attribute is used to specify how much work a task needs to complete in total. For a file upload form, this
could be the size of the file in kilobytes.
The
value
attribute is then used to specify how much of the job has been completed. In our file upload example,
this could be the number of kilobytes that have been uploaded.
The browser will automatically calculate the percentage of the task that has been completed and display that percent-
age using a bar graph, as shown in Figure A-5.
Figure A-5
A <progress> element, as displayed in Google Chrome.
Here is an example of how you can create a
<progress>
element.
<progress max="1145" value="203"></progress>
