The html5 tutorials

 
About HTML5
Home
Introduction to HTML5
Features of HTML5
Older versions Vs. HTML5
 
Tags  
source
article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
keygen
mark
meter
nav
output
progress
ruby
section
summary
time
video
wbr
 

The Progress tag - <progress> Tag

The progress tag is used to define the progress of a task which is currently undergoing in the page. It can be helpful to track what amount of task has been done and what is under process.

It could be implemented by the use of Ajax or JavaScript to display the progress of a task or any other process that is going on.

A progress tag can show you what percentage of a file is downloaded or how far the time has elapsed in the movie that you are currently watching:

  • The progress could either be indeterminate, meaning that the progress is being made but that it is not known how much more work is remaining to be done to complete the task.
  • The progress will show a determinate value that will tell how much task had been done and how much is remaining by providing a range.
  • If the value attribute is not provided then the progress bar becomes an indeterminate progress bar.

Example code:

<html>
  <body>
     Currently Downloading progress:
      <progress>
        <span id="dwnl_progress">28</span>%
      </progress>
    </form>
  </body>
</html>
Attribute Values Description of the attribute
value number Indicates the total task that had been completed so far
max number The total amount of task that is required to be done.