HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <progress> Tag

The <progress> tag is used to display the progress of a task such as file uploads, downloads, or other operations.
Unlike <meter>, <progress> represents completion of a task rather than a general measurement.

The value attribute shows the current progress, and max defines the total amount.

Syntax

html

<progress value="current" max="total">Fallback text</progress>

Attributes

AttributeDescription
valueCurrent progress value.
maxMaximum value (default is 1).
idAssigns a unique ID.
formAssociates the progress element with a form.
nameName of the progress element.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress Tag Example</title>
</head>
<body>
  <h2>File Upload</h2>
  <label for="fileUpload">Upload Progress:</label>
  <progress id="fileUpload" value="45" max="100">45%</progress>
  <p>Upload is at 45%.</p>
</body>
</html>

Output

Browser Output

html

You will see a horizontal progress bar representing the current progress (45%) relative to the maximum (100%).
The progress bar updates dynamically if you change the value using JavaScript.
Use our TryIt Editor to test progress updates.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser supports <progressbar> tag.

Notes

  • <progress> is designed specifically to show task completion.
  • The value must be less than or equal to max; otherwise, the bar may appear full.
  • Can be styled using CSS for custom colors and sizes.
  • Can be used in combination with <label> or <output> for more descriptive feedback.

Conclusion

The <progress> tag provides a clear visual indicator of task completion.
It enhances user experience for uploads, downloads, or any measurable process on modern websites.

PreviousHTML <meter> TagNextHTML <header> Tag