The progress and meter Elements
Show completion and measurement values with native HTML.
The progress Element
The <progress> element represents the completion of a task:
<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->Indeterminate Progress
Without a value, progress shows an indeterminate animation:
<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->
<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>All lessons in this course
- aside Complementary Content
- figure and figcaption Revisited
- details and summary Disclosure Widget
- The progress and meter Elements