HTML <progress> Tag

What You’ll Learn

The <progress> tag shows how far a task has advanced. This guide covers syntax, value and max, file upload patterns, and how progress differs from meter.

What Is the <progress> Tag?

The <progress> tag is an HTML5 element designed to represent the completion progress of a task. It is particularly useful for indicating the advancement of file uploads, form submissions, or any process with a measurable completion status.

Omit value when completion is unknown — the browser shows an indeterminate animated bar.

📝 Syntax

Place the tag in your document and use value to specify the current completion level:

<progress value="50" max="100"></progress>

Here, value represents the current progress and max sets the maximum value, indicating the completion threshold.

Syntax Rules

• max defaults to 1 if omitted; use max="100" for percentage-style bars.
• value must be between 0 and max.
• Provide fallback text inside the element for very old browsers: 50%.
• Pair with a label so users know what is progressing.

⚖️ <progress> vs <meter>

Examples Gallery

Build progress bars for file uploads and general task completion feedback.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Select File:</label>
  <input type="file" id="file" name="file">
  <progress value="0" max="100" id="uploadProgress">0%</progress>
  <input type="submit" value="Upload">
</form>

<progress value="30" max="100">30%</progress>

♿ Accessibility

• Label the bar — Use <label for="id"> to describe what is progressing.
• Use progress for tasks — Do not use meter for upload bars; semantics differ for assistive technology.
• Provide text fallback — Include percentage text inside the element for older user agents.
• Update aria-valuenow — Native progress exposes values; keep JavaScript updates in sync.

💡 Best Practices