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.
Interactive example
If your browser supports the <progress> element then you should see a progress bar below.
If not, you'll get the fallback content, which in this case is just a textual description which will be updated by the JavaScript to match the element's value attribute.
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
valueattribute 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.