progress element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The progress element represents the progress state of an operation, like a file transfer, an encoding or the retrieval of values from a database. This control is usually rendered as a progress bar, consisting of a container that's filled from left to right according to the progress of the operation.

A progress bar can represent a progress in two states: as indeterminate, indicating the process is being carried out but there's no information about its completion status; or as a value indicating the quantity of work that has been performed in the task.

Authors musn't confuse this element with meter. Unlike meter, the progress element measures only the completion of a task.

Progress in a progress control is measured between 0 and the value of the max attribute. If this attribute isn't defined, it takes the default value of 1.

Support for the progress element is incomplete among browsers. Authors may have to rely on scripts to achieve the same effect cross-browser.

Examples

In our first example, we'll display a lone progress control with a value of 20 out of 100. For such purpose, we're setting the max attribute with a value of 100, representing the number of steps involved in the task. What we can make out of this control (or more accurately, what it represents) is that there's a process of some kind going on that has been completed up to a 20%.

<p>Progress: <progress max="100" value="20"></progress></p>

Progress:

Our second example just adds some content to the progress bar. This content will be displayed in those browsers that don't support the element, making its use more backwards compatible.

<p>Upload progress: <progress max="68" value="47">47/68</progress></p>

Upload progress: 47/68

In the next example, we'll set up a progress control without a value attribute. This will tell users that a process is being carried out but its state of completion is unknown.

<p>File retrieving progress: <progress></progress></p>

File retrieving progress:

Lastly we'll implement a more dynamic progress bar. For this example, we'll add a script that will emulate a file transfer, showing its progress. For the script to correctly access the progress element in order to reflect the changes, an id needs to be provided in it.

Note: the script acting in this example has been defined elsewhere and its implementation is outside the scope of this website. Only its name is called in the onclick attribute.

<p>
  <input type="button" value="Transfer file" onclick="progressTransferFile()">
  Progress: <progress id="filetransfer" value="0"></progress>
</p>

Progress:

Attributes

Specific attributes

value

A numerical value indicating the task's level of progress. This value will be assigned to the element when the page is loaded. If this attribute is absent, the element indicates that a process is being performed but the status of its completion is unknown.

This attribute must contain a number between 0 and the value of the max attribute. When the max attribute is absent, the value 1 is to be considered the top limit.

Example

<p>Progress: <progress value="0.67"></progress></p>

Progress:

max

The total amount of work the task will take to be complete. This value will set the upper limit for the value attribute.

When this attribute isn't present in the control, the upper limit for the progress bar takes automatically the default value of 1.

Example

<p>Progress: <progress value="18" max="20"></progress></p>

Progress:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.

X

Are you looking for a place to host your next website? I can help you with that!