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.
Thevalueattribute shows the current progress, andmaxdefines the total amount.
Syntax
<progress value="current" max="total">Fallback text</progress>Attributes
| Attribute | Description |
|---|---|
| value | Current progress value. |
| max | Maximum value (default is 1). |
| id | Assigns a unique ID. |
| form | Associates the progress element with a form. |
| name | Name of the progress element. |
Example
<!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
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 |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <progressbar> tag.
Notes
<progress>is designed specifically to show task completion.- The
valuemust be less than or equal tomax; 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.
