Progress Tag in HTML5
In this article I am going to describe about the implementation and use of Progress tag in HTML5.
Progress Tag
Progress tag is used to represent completion progress of a task. It is new in HTML5. In this both the starting and the ending tag are mandatory.
<progress> tag is not used for representing a gauge. (To represent a gauge we use meter tag)
A progress tag can contain other tags. It can not contain another progress tag.
Browser Support
The <progress> tag is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari for Mac. It is not supported in IE 9 and earlier versions, or Safari for Windows.
Syntax
Syntax of Progress Tag :
<progress value="" max=""></progress>
Attributes
| Attribute |
Value |
Description |
| max |
number |
Specifies how much work the task indicated by the progress element requires. |
| value |
number |
Specifies how much of the task indicated by the progress element has been completed. |
Example of Progress Tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Progress Tag</title>
<style type="text/css"">
.progress1
{
height: 20px;
width: 100px;
}
.progress2
{
height: 10px;
width: 300px;
}
</style>
</head>
<body>
<h2>Implementation of Progress Tag in HTML5</h2>
<span>Downloading :</span>
<progress value="66" max="100" class="progress1">Progressing</progress><br>
<br>
<span>Installing :</span>
<progress value="66" max="100" class="progress2">Progressing</progress>
<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9
and earlier versions, or in Safari for Windows.</p>
</body>
</html>
Output
