<!-- Task Progress Bar: determinate progress with optional elapsed time -->
<div class="task-progress-bar">
  <!-- Info row: percentage + optional elapsed -->
  <div class="task-progress-bar__info">
    <span class="task-progress-bar__percent">{{ clampedProgress }}%</span>
    <span *ngIf="showElapsed" class="task-progress-bar__elapsed">
      {{ elapsedText }}
    </span>
  </div>

  <!-- Angular Material determinate progress bar -->
  <mat-progress-bar
    class="task-progress-bar__bar"
    mode="determinate"
    [value]="clampedProgress"
    aria-label="Task progress"
  ></mat-progress-bar>
</div>