What Is The HTML <progress> Tag?

What Is The HTML Progress Tag

Date First Published: 28th February 2023

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 5/10

Learn more about what the HTML <progress> tag is in this article.

In HTML, the <progress> tag is used to display the completion progress of a task in the form of a bar or a wheel. It is used in combination with JavaScript to manipulate the values. This tag is often used to display the progress of a file being uploaded to a website and is supported by all major web browsers.

Note: Info Icon

For accessibility reasons, always add the <label> tag.

Example Of The <progress< Tag

An example of the <progress< tag with the output can be seen below:

<label for="file">Uploading progress:</label> <progress id="file" value="77" max="100"> 77% </progress>
77%

Difference Between The <progress> and <meter> Tag

The progress and meter tags look similar, but they are used for different things. The <progress> tag is used to indicate the progress of a task and create a progress bar, whilst the <meter> tag is used to measure data within a specified range and create a gauge. The data represented by the <meter> tag, such as temperature, is not related to progress completion, but in the <progress> tag, only progress should be represented, such as downloading progress.

Attributes

Below are the attributes for the <progress> tag.

Attribute Description
Max Sets the total amount for a progress bar.
Value Specifies how much of a task is completed.


Feedback

  • Is there anything that you disagree with on this page?
  • Are there any spelling, grammatical, or punctuation errors on this page?
  • Are there any broken links or design errors on this page?

If so, it is important that you tell me as soon as possible on this page.


Comments