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

Log in to post a comment.

0 comment(s) Write a comment