The HTML 5 <progress> Tag is used to represent the progress of a task. It is similar to an indicator that displays the progress of completing a task. It is not used to represent the disk space or relevant query.
Note: This tag is used in conjunction with JavaScript to display the progress of a task. The <progress> tag also supports the Global Attributes and Event Attributes in HTML.
Syntax
<progress attributes...> </progress>Attributes
|
Attributes |
Descriptions |
|---|---|
|
It represents the total work that is to be done to complete a task. |
|
|
It represents the amount of work that is already completed. |
Example 1: In this example we will see the implementation of progress tag.
HTML
<!DOCTYPE html><html>
<body>
<h1>GeeksforGeeks</h1>
Downloading progress for a song:
<!--HTML progress tag starts here-->
<progress value="57"
max="100">
</progress>
<!--HTML progress tag ends here-->
</body>
</html>
|
Output:
Example 2: In this example we will see the implementation of progress tag.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Progress Example</title>
<style>
body {
text-align: center;
padding: 50px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Task Progress</h3>
<progress value="50" max="100"></progress>
<p>50% Complete</p>
</body>
</html>
|
Output:
- Google Chrome 15
- Edge 12 and above
- Firefox 1 and above
- Opera 14 and above
- Safari 6 and above