Showing Progress

These tags are entirely new in HTML5. They are ways to indicate progress. Currently support is limited. These tags are not dynamic. They require javascript to make them active.

Progress Bar

<progress value="number" max="number"> Shown if progress bar is not supported </progress>

The value is the current value of the progress bar and max is the maximum value (Support: FF10, OP10, CH10).

We're at 0 minimum with a current value of 22 out of 120 so far.
This is an example of using javascript to animate a progress bar:

The code for the progress bar is: We're at 0<progress value="22" max="120" id="pbar"> minimum with a current value of 22 out of </progress>120 so far.

Meter

<meter value="number" {min="number" max="number" optimum="number" high="number" low="number"}> Shown if progress bar is not supported </meter>

The value is the current value of the meter, min is the minimum value and max is the maximum value (Support: OP11, CH10).

Attributes:

We're 10 minimum with a current value of 32 out of 120 so far.
This is an example of using javascript to animate a meter, note that the high and low values are 100 and 25 respectively:

This is the code for the meter:
We're 10<meter value="32" min="10" max="120" optimum="50" high="100" Low="25" id="mbar"> minimum with a current value of 32 out of </meter>120 so far.


Next Lesson Next Page

HTML Home