Angular Material Progress Bar

By Arvind Rai, October 24, 2022

Angular Material MatProgressBar directive provides progress bar for indicating progress and activity. The selector for MatProgressBar directive is mat-progress-bar. The MatProgressBar is horizontal progress bar.
Find the properties of MatProgressBar directive.
mode: Mode of the progress bar. The values of mode are 'determinate', 'indeterminate', 'buffer' and 'query'.
value: Value of the progress bar. Default is zero.
bufferValue: Buffer value of progress bar. Default value is 0.
color: Color such as 'primary', 'accent' and 'warn'.
animationEnd: Event that emitted when animation of the primary progress bar completes. It only works for 'determinate' and 'buffer' modes.

To work with MatProgressBar directive, we need to import following module.

import { MatProgressBarModule } from '@angular/material/progress-bar';

Technologies Used
determinate
indeterminate
buffer
query
Complete Example
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0

determinate

In determinate mode, the percentage of completed operation is known. The percentage of completed operation is provided by value property of mat-progress-bar.

<mat-progress-bar mode="determinate" value="60"></mat-progress-bar>

indeterminate

The indeterminate mode is used where user is asked to wait until something finishes. In this mode, it is not known how long user has to wait.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

buffer

The buffer mode of progress bar is used to indicate some activity or loading from the server.

<mat-progress-bar mode="buffer" value="60" [bufferValue]="70"></mat-progress-bar>

value: Determines the progress of the primary bar.
bufferValue: Shows additional buffering progress.

query

The query mode of progress bar is used to indicate pre-loading before the actual loading starts.

<mat-progress-bar mode="query"></mat-progress-bar>

In query mode, the progress bar renders as an inverted indeterminate bar. Once the response progress is available, the progress bar mode should be changed to determinate mode to convey the progress. In query mode, the value property is ignored.

Complete Example

app.component.html

<h3>Determinate</h3>
<div *ngIf="res | async as msg; else loading">
    {{msg}}
</div>
<ng-template #loading>
    <mat-progress-bar 
      mode="determinate" 
      [value]="determinateCnt" 
      (animationEnd)="progressInLoading()">
    </mat-progress-bar>
</ng-template>

<h3>Indeterminate</h3>

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

<h3>Buffer</h3>

<mat-progress-bar mode="buffer" value="60" [bufferValue]="70"></mat-progress-bar>

<h3>Query</h3>

<mat-progress-bar mode="query"></mat-progress-bar>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    this.startCounter();  
  }
  res = {} as Observable<String>;
  determinateCnt = 0;
  startCounter() {
    setInterval(() => {
       this.determinateCnt += 5;
    }, 1000);

    this.res = of("Item Loaded").pipe (delay(21000));
  }
  progressInLoading() {
    console.log('Determinate mode: '+ this.determinateCnt + '% completed...');
  }  
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressBarModule } from '@angular/material/progress-bar';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatProgressBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.