Computer >> Computer tutorials >  >> Programming >> HTML

How to display completion progress of a task in HTML5?


Use the <progress> tag in HTML5 to display the completion progress of a task. This helps in creating a progress bar. The following are the attributes −

The HTML <progress> tag supports the following additional attributes −

Attribute
Value
Description
max How to display completion progress of a task in HTML5?Max
It should have a value greater than zero and a valid floating-point number.
value How to display completion progress of a task in HTML5?value
Specifies how much of the task has been completed. It should be a floating-point number between 0 and max or 0 and 1 if max is omitted.

Example

You can try to run the following code to create a progress bar −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Progress Tag</title>
   </head>
   <body>
      <h2>Water Level</h2>
      <progress value = "60" max = "100"/>
   </body>
</html>