HTML progress: Set Completion Values and Switch to Indeterminate

HTML <progress> shows how much of a task has been completed. Set value and max for determinate progress, or omit the value attribute when the total amount of work is unknown. The element does not automatically measure uploads or downloads.

Calculate progress with value and max

value is the completed amount and max is the total amount. A value of 20 with max 100 means 20%; with max 200 it means 10%. When max is omitted, its default is 1, so 20% is written as value="0.2". Use a valid number greater than zero for max and a value between zero and max.

The minimum is always zero; progress does not use a min attribute. Consider meter for a measurement within a range, such as storage usage or a score. Use progress for the completion of an ongoing task.

Complete example: update progress and switch to indeterminate

Save this code as progress-demo.html and open it in a browser. The buttons only change the displayed values for practice; they do not transfer files.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Progress and indeterminate state</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>Progress practice</h1>
  <label for="work">Example task progress</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20% complete</p>
  <button type="button" id="advance">Change to 80%</button>
  <button type="button" id="unknown">Unknown total</button>
  <button type="button" id="reset">Reset</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = 'In progress';
        status.textContent = 'In progress: the total amount of work is unknown.';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '% complete';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

1. The initial state is 20% complete. Click Change to 80% to change both the bar and its description to 80%.
2. Click Unknown total to remove the value attribute. The browser shows indeterminate progress alongside a sentence explaining that the total is unknown.
3. Click Reset to restore the value attribute and return to 20%.

value="0" is determinate progress with no work completed; it is not indeterminate. To switch an existing progress element to indeterminate, remove the attribute as the example does. The appearance and animation of indeterminate progress can vary with the browser, operating system, and user settings.

Provide a task name and a status sentence

The text “20%” inside progress is fallback text for older browsers, not a substitute for the task name. Associate a label using matching for and id values, or provide an appropriate ARIA accessible name, to identify the task. Show the current state in words as well as through color and bar length.

For real tasks, update the value from information supplied by a server or transfer events. Filling a bar with a timer does not establish that work is complete. Design separate messages and actions for errors, cancellation, and completion, and control the frequency of announcements so that status updates do not repeat excessively. The MDN progress reference explains the syntax and accessibility requirements.