🖼️ Module 14 · Advanced Elements🟡 IntermediateLESSON 50
Progress Elements
Course progress56%
🎯 What you'll learn: The
<progress> element's determinate and indeterminate states, and how to style it with CSS.
Section 1
Determinate vs Indeterminate
A determinate progress bar has a known value out of a max — like "60% of a file uploaded." An indeterminate one has no value attribute at all — it shows an ongoing animated bar for a task with an unknown duration.
progress-basic.html
HTML
<!-- Determinate: 60 out of 100 --> <progress value="60" max="100"></progress> <!-- Indeterminate: unknown duration --> <progress></progress>
Section 2
Updating via JavaScript
progress-js.html
HTML
<progress id="upload" value="0" max="100"></progress> <script> document.getElementById('upload').value = 45; // updates live </script>
💡
Real uploads use XHR/fetch progress events
In a real file upload, you'd set .value inside an xhr.upload.onprogress handler using event.loaded and event.total — not a fixed number.
Section 3
Styling With CSS
Progress bars are notoriously tricky to style consistently — different browsers use different pseudo-elements for the track and the filled bar.
progress-css.html
HTML
/* In CSS: */
progress { height: 10px; border-radius: 6px; }
progress::-webkit-progress-bar { background: #101c3d; border-radius: 6px; }
progress::-webkit-progress-value { background: #fb923c; border-radius: 6px; }
progress::-moz-progress-bar { background: #fb923c; border-radius: 6px; }
| Attribute | Meaning |
|---|---|
| value | Current progress amount |
| max | Total amount (default 1 if omitted) |
| No value attribute | Indeterminate/animated state |
🧩 Knowledge Check — Lesson 50
5 questions to test your understanding.
1. What makes a progress element "indeterminate"?
2. What does max represent?
3. How do you update a progress bar's value with JS?
4. Which pseudo-elements style the filled bar in WebKit browsers?
5. What would you use in a real file upload to set progress accurately?
Coding Challenge — Lesson 50
Apply what you learned · Intermediate Level
Challenge: Build a Fake Upload Progress
Build a progress bar starting at 0 with max 100, and write JS using setInterval to increment its value by 10 every 500ms until it reaches 100.
Build a progress bar starting at 0 with max 100, and write JS using setInterval to increment its value by 10 every 500ms until it reaches 100.
💡 Show hints if you're stuck
- Remember to clearInterval() once value reaches max.
Finished this lesson?
Mark it complete to track your progress.
Lesson 50 of 62Module 14 — Advanced Elements