Description

The HTML element <progress> is used to define the completion progress of a task.

It is used to indicate the percentage completion of a task, such as content loading or a process completion progress.

  • It is typically displayed as a progress bar with values marked from 01 to 100%.
  • It is used in conjunction with JavaScript to display and update the progress of a task, as the progress bar needs to be updated as the task progresses.

It should not be used to define a gauge, which can be defined using the <meter> element.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain Inline elements and text, but it cannot include <progress> element.
Tags Both the opening and closing tags are required.
Versions HTML 5

Syntax

Here is the basic syntax of the <progress> element.

<progress>...</progress>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element progress</title>
</head>
<body>
    <h2>Task Progress Bar</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>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <progress> element.

Attribute Type Details
Element-Specific Attributes The tag <progress> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <progress> supports the HTML Global Attributes.
Event Attributes The tag <progress> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <progress> element.

Attribute Value Required Description
value number No 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.
max number No Specifies how much work the task requires in total.
The default value is 1 if the attribute is not specified.

Browser Compatibility

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

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

Related Links