Tech Junkie Blog - Real World Tutorials, Happy Coding!: HTML5 : Progress Element

Tuesday, October 7, 2014

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!

4 comments:

Search This Blog