HTML - <progress> Tag

Quiz

The <progress> Tag

The HTML <progress> tag is used to display an indicator showing the completion progress of a task, commonly as a progress bar. This tag, introduced in HTML5, serves as a progress indicator.

Syntax

Following is the syntax of <progress> tag −

<progress>.....</progress>

Attributes

The HTML <progress> tag supports Global and Event attributes of HTML. Additionally, it has some specific attributes, which are listed bellow.

Attribute	Value	Description
value	number	Holds a number that defines the current value of the progress bar.
max	number	This is used to set the maximum value of the progress bar.

Example: Progress Bar

In the following example, we explore the usage of the <progress> tag and how it displays a progress bar. Running the code will generate an output showing a progress bar indicating that 35% of the work has been completed.

<!DOCTYPE html>
<html>
<body>
   <h1>HTML Progress Bar</h1>
   <label for="task">Work completed:</label>
   <progress id="task" value="35" max="100"> 35% </progress>
</body>
</html>

Example: Progress Tag Download

Consider the following example, where we use the <progress> tag to display the download progress of a file. Running the code will show that 45% of the file has been downloaded.

<!DOCTYPE html>
<html>
<body>
   <h1>HTML Progress Bar</h1>
   <label for="file">Downloading progress:</label>
   <progress id="file" value="45" max="100"> 45% </progress>
</body>
</html>

Example: Progress Bar Invalid

Let's consider the following example, where we use the <progress> tag without any attributes. If no attributes are specified, the progress bar will move from left-to-right and then right-to-left.

<!DOCTYPE html>
<html>
<body>
   <h1>HTML Progress Bar</h1>
   <progress></progress>
</body>
</html>

Supported Browsers

Tag
progress	Yes 8.0	Yes 10.0	Yes 16.0	Yes 6.0	Yes 11.0

html_tags_reference.htm

Print Page