The <progress> element

Displays a progress bar or similar indication of how much of something has been completed.

Introduction

The <progress> element is designed for use by JavaScript code that wants to display a progress indicator of some sort to show how much of a task has been completed. Typical uses would be showing how much of a large file has been uploaded to a server, or how much of a time-consuming calculation has been completed.

You can create a static progress bar with HTML like this:

<progress max=100 value=42>
 Fall-back content for older browsers.
</progress>

The value attribute indicates how much progress has been made so far (in the example above, forty-two percent). The max attribute defines the range over which the value can vary. The minimum value is always zero, but you can set the max attribute to whatever is convenient for your code. If max is missing, it defaults to one.

There's not much point in a progress bar that never changes, so you'll want to write JavaScript code which periodically updates it by setting the value property on the element's DOM object.

Indeterminate progress

If the value attribute is missing, then the progress bar will display in a special way. This is the so-called indeterminate state and is meant to indicate that progress is being made, but there's currently no way to know how fast or how far through the process it's got. For example, this could be used when a progress indicator is meant to show how much of a file download has been completed, but this time the source of the download hasn't indicated how much data there will be altogether.

To set a <progress> element into indeterminate mode from JavaScript, just remove the value attribute using the .removeAttribute method. Setting it instead to a numerical value will put it back into normal mode, showing the appropriate amount of progress. To find out whether or not a progress bar element is currently indeterminate, get the value of the position property, which will be a floating point number in the range 0–1 for a determinate progress bar, and −1 for an indeterminate one.

Full list of attributes

All the usual HTML global attributes are available

max
The maximum amount of progress that's possible. The progress bar will show as complete when the value attribute matches this. Defaults to one if not given.
value
The amount of progress that has been made, as a number between zero and the maximum value.

Further information

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom