A progress bar is a user-interface control that shows how much of a task has loaded, uploaded, transferred, or been completed. Use an indicator when an action takes longer than about one second, and pair it with explanatory text for screen readers and other assistive technologies. section 3.0 section 3.6
Build a responsive HTML progress bar by:
- Adding a progress element with value="32" and max="100" to represent completion. section 3.6
- Setting width: 100% and height: 24px so the control fills its section and remains visibly substantial. section 3.6.1
- Using accent-color to change the colored progress indicator. section 3.6.1
- Resetting browser styling with appearance: none when deeper customization is necessary, while recognizing that vendor-prefixed properties may be experimental or nonstandard. section 3.6.1
Minimal responsive progress bar
<progress value="32" max="100">32%</progress> progress { width: 100%; height: 24px; accent-color: #128688; } section 3.6 section 3.6.1
Listing 3.14 Progress bar HTML
<body>
<section>
...
<progress value="32" max="100">32%</progress> #1
</section>
Inspect the minimal progress-bar markup and its fallback text. section 3.6
