HTML <progress> element

The <progress> element represents a task's progress towards completion. It can show zero progress, partial progress, or full completion, as well as activity whose completion amount is unknown.

A common example is a file upload, a download, a form step, a loading operation, or a long-running calculation. The point is not simply that a number exists. The point is that a job is being done, and the page is showing how far that job has moved towards its end.

If the amount completed is known, the value attribute gives the current amount and the max attribute gives the amount that would mean complete. For example, value="40" max="100" means 40% complete. The minimum is always zero; there is no min attribute. The maximum must be positive and defaults to 1 when omitted. A specified value must be between zero and the maximum.

If the value attribute is omitted, the progress is indeterminate. This means that something is happening, but the page cannot honestly say how much has been done or how much remains. This is useful for waiting states where activity is real but the size of the task is unknown.

The <progress> element should not be used as a general measurement bar. Disk space, battery level, rating strength, search relevance, or exam score are not task progress. Those are measurements inside a range, and the more suitable element for that kind of information is <meter>.

Text inside <progress> is fallback content; it does not supply an accessible label. Use an associated <label> to identify the task, and place a readable value beside the bar so it is visible in supporting browsers as well.

The examples show a fixed 40% value and an indeterminate state. These are demonstrations, not active uploads. The element does not measure a task or advance its own value; application code updates it as work proceeds. To switch to indeterminate progress, remove value rather than setting it to zero.

Attributes: value, max, GLOBALS.

Typical layout:
<p><label for="pf-demo-upload">Upload progress</label><br>
<progress id="pf-demo-upload" value="40" max="100">40%</progress>
40% complete</p>
<p><label for="pf-demo-wait">Preparing files</label><br>
<progress id="pf-demo-wait">Completion unknown</progress>
Completion amount unknown</p>

Visual representation: