What is the Progress Element? | HTML Interview Questions

What You'll Learn

Using the progress element
Determinate vs indeterminate states
JavaScript updates

The Progress Element

The <progress> element displays task completion progress. Unlike <meter> (for measurements), progress represents ongoing tasks like file uploads, downloads, or loading states.

States

Determinate: Known percentage with value and max
Indeterminate: Unknown completion (omit value)

Examples

index.htmlHTML

<!-- Determinate progress -->
<label for="file">Upload progress:</label>
<progress id="file" value="70" max="100">70%</progress>

<!-- Indeterminate (animated by browser) -->
<label for="loading">Loading:</label>
<progress id="loading">Loading...</progress>

JavaScript Control

code.jsJavaScript

async function startDownload() {
  const progress = document.getElementById('download');
  for (let i = 0; i <= 100; i += 10) {
    progress.value = i;
    await new Promise(r => setTimeout(r, 200));
  }
}