How to display completion progress of a task in HTML5?

HTMLWeb DevelopmentFront End Technology

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 Max
It should have a value greater than zero and a valid floating-point number.
value 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>
raja
Published on 13-Mar-2018 08:32:26
Advertisements