ipsos-components/src/demo-app/a11y/progress-bar/progress-bar-a11y.html

Material Design components for Angular

<section>
  <h2>Survey progress (Determinate progress bar)</h2>
  <mat-progress-bar mode="determinate" [value]="surveyProgress" color="primary"
                   aria-label="Survey progress">
  </mat-progress-bar>
</section>

<section>
  <h2>Video progress (Progress bar with buffer) </h2>
  <mat-progress-bar [value]="videoPlayValue" [bufferValue]="videoBufferValue" mode="buffer"
                   color="primary" aria-label="Video progress">
  </mat-progress-bar>
</section>

<section>
  <h2>Loading content progress (Indeterminate progress bar)</h2>
    <mat-progress-bar mode="indeterminate" color="warn" aria-label="Loading content">
    </mat-progress-bar>
</section>

<section>
  <h2>Search progress (Query progress bar)</h2>
  <mat-progress-bar mode="query" color="accent" aria-label="Searching"></mat-progress-bar>
</section>