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.
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.
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>
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>
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
<p> <input type="button" value="Transfer file" onclick="progressTransferFile()"> Progress: <progress id="filetransfer" value="0"></progress> </p>
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.
<p>Progress: <progress value="0.67"></progress></p>
The total amount of work the task will take to be complete. This value will set the upper limit for the
When this attribute isn't present in the control, the upper limit for the
progress bar takes automatically the default value of 1.
<p>Progress: <progress value="18" max="20"></progress></p>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.