html
  1. html-progress-tag

HTML <progress> Tag

  • The HTML progress tag represents an element that displays the completion progress of a task.
  • It is typically used to indicate the status of a loading process or the completion progress of a user task, such as filling out a form.

Syntax

The syntax for the HTML progress tag is as follows:

<progress value="value" max="maximum"></progress>
  • The value attribute specifies the current progress value. Its value can be a number between 0 and the value of the max attribute.
  • The max attribute specifies the maximum value of the progress. This attribute defaults to 1 if it is not explicitly set.

Example

Here is an example of how to use the HTML progress tag:

<p>Form completion progress:</p>
<progress value="20" max="100"></progress>
Try Playground

The above example will display a progress bar that shows the completion progress of a user task. The progress bar will be 20% complete.

Explanation

The HTML progress tag is used to display the completion progress of a task. It is typically used to indicate the status of a loading process or the completion progress of a user task. The progress value is represented by a horizontal gauge, which is filled in proportion to the value of the value attribute, relative to the max attribute.

Use

The HTML progress tag is used when you want to visually represent the progress of a task to the user. For example, you might use the progress tag to show the completion progress of a form or the progress of a file download. It can also be used to indicate the progress of a complex process, such as a web application startup sequence.

Important Points

The following are some important points to consider when using the HTML progress tag:

  • The progress tag is not supported by some older browsers like Internet Explorer 9 and earlier versions.
  • The progress tag is not a form element. Therefore, it cannot be submitted with a form or receive user input.
  • The progress bar is initially displayed as a rectangle with zero width. It is only displayed once the value of the progress changes from zero.
  • When the value of the progress is greater than the maximum value specified by the max attribute, the progress bar will be displayed as fully complete.

Summary

The HTML progress tag is a simple way to display the completion progress of a task. Its syntax is simple and easy to use. It can be used to show the progress of a task to the user, like completing a form, file download, or application startup sequence. By understanding its syntax, output, explanation, usage, and important points, you can effectively use the HTML progress tag to improve the user experience of your web application.

Published on: