This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5
Progress bars are usability patterns that represents how long a process would be. It may also represent how long you still need to wait.
HTML5 has also introduced its own implementation. This is through the
The progress tag has two attributes:
- value – Represents how much has been completed
- max – Represents how long the progress will be
Represents 30% completion:
<progress value="30" max="100">30%</progress>
Represents 80% completion:
<progress value="80" max="100">80%</progress>
See the progress tag in action! using the above code with 30% and 80% completion.
The progress tag is supported by Chrome 6.0+, Firefox 6.0+, IE10 and Safari 5.2+