HTML <progress> Tag

<p>Progress: 
<progress value="14" max="50">
	<span>14</span>%
</progress>
</p>

The above example demonstrates usage of the <progress> element.

The <progress> element represents the completion progress of a task.

Browsers typically display a progress bar, indicating how much progress has been made and how much there is to go. If it's unknown how much further there is to go, the progress bar will be rendered in a way that shows that expresses that.

Determinate vs Indeterminate

If it's known how much more there is to go, it's called a determinate progress bar. Otherwise it's called an indeterminate progress bar.

To make a determinate progress bar

Add a value attribute with the current progress (either a number from 0.0 to 1.0, or, if the max attribute is specified, a number from 0 to the value of the max attribute)

To make an indeterminate progress bar

Remove the value attribute

Legacy Support

You can provide support for legacy browsers (i.e. browsers that don't support the <progress> element) by providing the current value and the maximum value inside the element (i.e. as its content).

<progress> vs <meter>

The <progress> element should not be used to create a gauge (such as presenting the amount of disk space available). To present a gauge, use the <meter> element instead.

Also see this working example of a progress bar.