Problem Statement
What does the <progress> element represent?
Explanation
The progress element represents the completion progress of a task. It displays as a progress bar showing how much of a task is complete. The value attribute sets current progress, and max attribute sets the total. For example, progress value equals 70 max equals 100 shows 70 percent complete. If you omit value, it shows an indeterminate state for ongoing progress with unknown completion. Progress is useful for file uploads, form completion, download status, or multi-step processes. It provides visual feedback to users. The progress element is semantic and more accessible than creating progress bars with divs. Screen readers can announce progress values. It is different from meter which represents measurements within a range, not task completion.
Code Solution
SolutionRead Only
<!-- Determinate progress (known completion) -->
<label for="file">Upload progress:</label>
<progress id="file" value="70" max="100">70%</progress>
<!-- Indeterminate progress (unknown time) -->
<p>Loading...</p>
<progress></progress>
<!-- Form completion -->
<p>Form completion:</p>
<progress value="2" max="5">Step 2 of 5</progress>
<!-- Download progress -->
<p>Downloading file:</p>
<progress id="download" value="0" max="100">0%</progress>
<p id="percent">0%</p>
<script>
// Update progress with JavaScript
let progress = 0;
const progressBar = document.getElementById('download');
const percentText = document.getElementById('percent');
setInterval(() => {
if (progress < 100) {
progress += 10;
progressBar.value = progress;
percentText.textContent = progress + '%';
}
}, 500);
</script>