Progress bar

How to use it

Use for a task with a known amount of work, such as a file upload or an import, where you can report a percentage. Update the value attribute, the fallback text inside <progress> and the visible percentage together from your script, and change the id/for pair if you show several. If you cannot measure progress, use an indeterminate indicator (as in the loading button); for a static measurement within a range (disk space, quota), use the meter gauge.

Accessibility

A native <progress> element labelled by a <label for>, so screen readers announce "Uploading quarterly-report.pdf, progress bar, 64%" with no ARIA needed. The visible percentage repeats the value for sighted users and is aria-hidden so it is not read twice; the bar's fill colour carries no meaning on its own. Label #0f172a and percentage #334155 on white are 17.9:1 and 10.4:1, and the fill uses accent-color #1d4ed8.

Source (copy-ready)

Copy code

<div class="dcl-progress">
  <div class="dcl-progress__head">
    <label class="dcl-progress__label" for="dcl-progress-upload">Uploading quarterly-report.pdf</label>
    <span class="dcl-progress__value" aria-hidden="true">64%</span>
  </div>
  <progress class="dcl-progress__bar" id="dcl-progress-upload" max="100" value="64">64%</progress>
</div>
<style>
.dcl-progress { max-width: 28rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-progress__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.375rem; }
.dcl-progress__label { min-width: 0; font-weight: 600; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
.dcl-progress__value { font-variant-numeric: tabular-nums; color: #334155; background-color: #ffffff; }
.dcl-progress__bar { display: block; width: 100%; height: 0.75rem; accent-color: #1d4ed8; }
</style>