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

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


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> 


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> 


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.


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

<div *ngIf="res | async as msg; else loading">
<ng-template #loading>


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


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


<mat-progress-bar mode="query"></mat-progress-bar> 
import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

  selector: 'app-root',
  templateUrl: './app.component.html'
export class AppComponent implements OnInit {
  ngOnInit() {
  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...');
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';

  declarations: [
  imports: [
  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.
Angular Material Progress Bar


Progress Bar

Download Source Code


©2023 | Privacy Policy | Contact Us