HTML Progress Tag

HTML <progress> tag represents the completion progress of a task, such as downloading a file or completing a form. It displays a progress bar and can be customized to show how much of the task is complete. It requires the use of two attributes: value (the current progress) and max (the total value or maximum completion).

HTML <Progress> Tag with Syntax

<progress id="file" value="30" max="100"></progress>

HTML <Progress> Tag with Attributes

value: how much of the task has been completed show in progress bar.
max: Specifies the total value of the task.

HTML <Progress> Tag with Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Progress Tag with Example</title>
</head>
<body>

  <h1>File Download Progress</h1>

  <label for="file">Downloading File:</label>
  <progress id="file" value="30" max="100"></progress>
  <span>30%</span>

  <h2>Other Task Progress</h2>
  <p>Task completion:</p>
  <progress value="50" max="100"></progress> 50%

</body>
</html>

336