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:

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> 