Published Jul 28, 2023
Contribute to Docs

The <progress> tag is a semantic HTML element that is used to display a progress bar, a graphic indicator that represents the status of an event or process such as the level in a game, a question in an online exam, or parts of a form.


<progress value="number" max="number">
<!-- Percentage of the completed task goes here -->

Note: When using the max attribute in the <progress> element, the value must be greater than 0 and be a valid floating point number (e.g. 5.3). If the value is not specified, the default value is 1.


The code snippet below shows the <progress> tag is being used to convey an MP4 file being uploaded.

<form action="/upload" method="POST">
<label for="mp4-file">Upload MP4 file:</label>
<input type="file" id="mp4-file" name="mp4-file" />
<br />
<label for="mp4-progress">Upload progress:</label>
<progress id="mp4-progress" value="50" max="100">50%</progress>
<br />
<input type="submit" value="Upload" />

Here’s how it looks in a browser:

Progress Bar

Note: The example above demonstrates the basic implementation of the syntax for the <progress> tag. A true implementation would require additional scaffolding (such as JavaScript) in order to update the graphic dynamically.

All contributors

Looking to contribute?

Learn HTML on Codecademy