Progress Bar

<!--
  DETERMINATE. That word is the entire spec of this component, and it is what
  separates it from loader-bar-indeterminate:

    aria-valuenow present  -> "43% complete"     (this component)
    aria-valuenow absent   -> "busy, unknown"    (the indeterminate bar)

  So: only set aria-valuenow if you actually know the number. A hardcoded
  aria-valuenow="50" on a bar that has no idea is a lie the screen reader will
  repeat with total confidence.

  role="progressbar" is NOT a live region and browsers do not announce value
  changes on their own - the visible percentage is what most sighted users read,
  and assistive tech reads the value when the user lands on the bar. Do not add
  aria-live to it: a bar ticking 1→100 would fire a hundred announcements.

  aria-valuemin/max default to 0/100, but write them anyway - the defaults are
  inconsistently implemented, and the day someone switches to bytes the omission
  becomes a bug.
-->
<div class="progress">
  <div class="progress__head">
    <span class="progress__label" id="upload-label">Uploading backup.tar.gz</span>
    <span class="progress__value">43%</span>
  </div>

  <div
    class="progress__track"
    role="progressbar"
    aria-labelledby="upload-label"
    aria-valuenow="43"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <div class="progress__fill" style="width: 43%"></div>
  </div>
</div>