HTML5 <progress> Tag

Topic: HTML5 Tags Reference« Prev|Next »

Description

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

This element normally used to indicate how much of a task has been completed, such as loading something on a page or registration process. It is typically displayed as a progress bar and often marked as a percentage from 0 to 100%.

The following table summarizes the usages context and the version history of this tag.

Placement: Inline
Content: Inline and text, but no <progress> among its descendants
Start/End Tag: Start tag: required, End tag: required
Version: New in HTML5

Syntax

The basic syntax of the <progress> tag is given with:

HTML / XHTML: <progress> ... </progress>

The example below shows the <progress> tag in action.

  • <h2>Task Progress</h2>
  • <p>Progress: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>
  • <script type="text/javascript">
  •     var i = 0;
  •     var progressBar = document.getElementById("bar");
  •     function countNumbers(){
  •         if(i < 100){
  •             i = i + 1;
  •             progressBar.value = i;
  •             // For browsers that don't support progress tag
  •             progressBar.getElementsByTagName("span")[0].textContent = i;
  •         }
  •         // Wait for sometime before running this script again
  •         setTimeout("countNumbers()", 500);
  •     }
  •     countNumbers();
  • </script>
 

Note:The <progress> element normally used in conjunction with the JavaScript to display the progress of a task. This element should not be used for representing a gauge. To represent a gauge, use the <meter> tag instead.


Tag-Specific Attributes

The following table shows the attributes that are specific to the <progress> tag.

Attribute Value Description
max number Specifies how much work the task requires in total.
value number Specifies how much of the task has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if the max attribute is not present.

Global Attributes

Like all other HTML tags, the <progress> tag supports the global attributes in HTML5.


Event Attributes

The <progress> tag also supports the event attributes in HTML5.


Browser Compatibility

The <progress> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 16+
  • Google Chrome 8+
  • Internet Explorer 10+
  • Apple Safari 6+
  • Opera 11+

Further Reading

See tutorial on: HTML Forms.

Related tags: <meter>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.