Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to specify how much work the task requires in total in HTML5 ?

  • Last Updated : 25 Mar, 2021

The <progress> tag shows how much a task is completed.

Attributes:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • max: The overall amount of work required for the mission. 1 is the default value.
  • value: Indicates the proportion of the task that has been completed.

Notes:

To display the progress of a task, use the <progress> tag in accordance with JavaScript. The <progress> tag is not used to reflect a gauge (e.g. disk space usage or relevance of a query result). Instead, use the <meter> tag to display a gauge. For best accessibility practices, do use the <label> tag.



Example 1: The following example demonstrates to use of the <progress> tag to display a progress bar.

HTML




<!DOCTYPE html>
<html>
  <body>
    <h1>GeeksForGeeks</h1>
    <h2>Java Collections and Frameworks</h2>
  
    <label for="course">
      Downloading course in progress :
    </label>
    <progress id="course" value="72" max="100">
      72%
    </progress>
  </body>
</html>

Output:

Progress bar example

Example 2: The following example demonstrates how to represent the rating for different programming languages.

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        text-align: center;
        color: green;
      }
  
      h2 {
        text-align: left;
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>Programming Language Rating</h2>
  
    <label for="C++">C++ ::</label>
    <progress id="C++" value="32" max="100">
      62%
    </progress>
  
    <br /><br />
  
    <label for="J">Java ::</label>
    <progress id="J" value="84" max="100">
     84%
    </progress>
  
    <br /><br />
  
    <label for="P">Python ::</label>
    <progress id="P" value="42" max="100">
     42%
    </progress>
  
    <br /><br />
  
    <label for="H">HTML ::</label>
    <progress id="H" value="70" max="100">
     70%
    </progress>
  
    <br /><br />
  
    <label for="C">CSS ::</label>
    <progress id="C" value="55" max="100">
     55%
    </progress>
  
    <br /><br />
  
    <label for="JS">JavaScript ::</label>
    <progress id="JS" value="28" max="100">
     28%
    </progress>
  </body>
</html>

Output:

<progress> tag

The HTML global attributes are also supported by the <progress> tag. The HTML event attributes are also supported by the <progress> tag.




My Personal Notes arrow_drop_up
Recommended Articles
Page :