HTML / CSS / JavaScript Tutorial

HTML Element: <progress>

[this page | pdf | back links]

The HTML <progress> element is most commonly used to show the progress of some task. It is new in HTML 5. It is not very suitable for representing a gauge (like a fuel tank), for which better usually is to use a <meter> element.

For example, markup as follows:

 Progress so far: <progress value="40" max="100">

creates output that involves a progress bar showing that 40% of the task has been completed:

If you want the bar to be narrower than it is by default then you need to use the width attribute within the style of the element, e.g. markup as follows:

 Progress so far: <progress value="33" max="100" style="width:40px">

Usually a progress bar will be updated as time progresses, often using JavaScript.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above. It also supports the following additional properties:

The default style applicable to this element is shown here.

NAVIGATION LINKS
Contents | Prev | Next | HTML Elements