HTML5 : Progress Element

<progress> element represents the progress of a task or goals and objectives, there are two ways that you can set this element, they are the following

• Determinate - know in advance the starting and ending values
• Indeterminate - end value is unknown in advance (remove value attribute)

Determinate Example:

<p>Our goal is to have 500 runners: </p>
0
<progress value=”250” max=”500”></progress>
500

Our goal is to have 500 runners:

0 500

Indeterminate Example:

<p>Please wait while we download your TPS Report!</p>
<progress></progress>

Please wait while we download your TPS Report!