Open In App

HTML 5 <progress> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

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

max

It represents the total work that is to be done to complete a task.

value

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:

Screenshot-2023-12-14-174000Supported Browsers

  • Google Chrome 15
  • Edge 12 and above
  • Firefox 1 and above
  • Opera 14 and above
  • Safari 6 and above


Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads