Path // www.yourhtmlsource.com → Reference → <progress>

<progress>

by Ross Shannon

The <progress> element represents the completion progress of a task. It displays a visual progress bar that shows how much of a task has been completed and how much remains. Common uses include file uploads, downloads, installation processes, or multi-step forms. Unlike <meter>, which shows a measurement within a range, progress specifically indicates task completion.

Clock This page was last updated on 2025-11-17


Syntax

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

The element requires both opening and closing tags. The value attribute indicates current progress, and max defines the total amount. Text content between the tags provides a fallback for older browsers.

Attributes

  • value - The current progress amount. If omitted, the progress bar is indeterminate (shows animation but no specific progress).
  • max - The total amount of work (default: 1). The value attribute should not exceed this.
  • Global attributes - Supports standard attributes like id, class, style

When value is not specified, the progress bar becomes indeterminate, showing an animation that indicates work is happening without specifying how much is complete.

Examples

File Upload Progress

<label for="upload">Upload Progress:</label>
<progress id="upload" value="45" max="100">45%</progress>
<span>45% complete</span>

Indeterminate Progress (Loading)

<p>Loading data...</p>
<progress aria-label="Loading">Loading...</progress>

Multi-Step Form Progress

<p>Step 2 of 5</p>
<progress value="2" max="5" aria-label="Form progress">
  Step 2 of 5
</progress>

Download with Percentage

<div class="download-status">
  <label for="download">Downloading file.zip:</label>
  <progress id="download" value="0.75" max="1">75%</progress>
  <output for="download" aria-live="polite">75% complete</output>
</div>

When to Use

Use the <progress> element when:

  • Showing file upload or download progress
  • Displaying installation or processing status
  • Indicating completion of multi-step processes
  • Showing loading states with known completion percentage
  • Visualizing task completion in applications

Accessibility and best practices:

  • Always provide fallback text content between the tags
  • Associate with a label using for attribute or aria-label
  • Update the value dynamically with JavaScript as progress changes
  • Use indeterminate state when progress cannot be determined
  • Consider adding text alongside to show percentage
  • Screen readers announce progress updates
  • Use aria-live regions to announce significant progress changes
  • Don't use for static measurements - use <meter> instead
  • Can be styled with CSS (appearance: none; for custom styling)
  • Provide context about what is being loaded or processed
  • <meter> - Displays a scalar measurement (different use case)
  • <output> - Displays calculation results
  • <label> - Labels for the progress element
  • <form> - Parent form container

JavaScript example:

// Update progress bar dynamically
const progressBar = document.getElementById('upload');
const statusText = document.getElementById('status');

function updateProgress(percent) {
  progressBar.value = percent;
  statusText.textContent = percent + '% complete';
}

// Simulate upload progress
let progress = 0;
const interval = setInterval(() => {
  progress += 10;
  updateProgress(progress);
  if (progress >= 100) clearInterval(interval);
}, 500);

When to use progress vs. meter:

<!-- PROGRESS: Task moving toward completion -->
<p>Upload: <progress value="70" max="100">70%</progress></p>

<!-- METER: Static measurement within range -->
<p>Disk space: <meter value="0.7">70% used</meter></p>