A .progress wrapper holds a .progress-bar whose width is the percentage done. Since 5.3.0 role="progressbar" and the ARIA values go on the wrapper. Set the wrapper's height, color bars with .bg-* or .text-bg-*, add .progress-bar-striped (and -animated), and group .progress segments in .progress-stacked.
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="p-3 vstack gap-2">
<div class="progress" style="height:6px" role="progressbar" aria-label="Build" aria-valuenow="40">
<div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div></div>
<div class="progress-stacked">
<div class="progress" style="width: 30%" role="progressbar" aria-label="Photos"
aria-valuenow="30"><div class="progress-bar text-bg-warning">Photos</div></div>
<div class="progress" style="width: 25%" role="progressbar" aria-label="Apps"
aria-valuenow="25"><div class="progress-bar bg-info">Apps</div></div>
</div>
</div>
Width changes animate with a 0.6-second transition, so updating bar.style.width and aria-valuenow from upload progress events moves smoothly. The native <progress> element (Progress and Meter) needs no ARIA.