Angular 9 Material Progress Bar Tutorial Example

Last updated on by Digamber
This is a step by step tutorial about how to create eye-catching progress bars in Angular 9 using Angular Material 9+ library. We are going to use mat-progress-bar directive to create various types of progress bars.

A progress bar is a user interface element. It is used to show the progression for various operation performed in web, mobile or software applications such as downloading a file, transferring a file, making booking etc.

Material design offers top-notch and beautiful UI components to create an application faster. The material progress bar is one the UI component available in the material design library that is easy to implement and use.



Initiate Angular Project


Just run the following command to get started.

ng new angular-progressbar

Don’t forget to get into the project folder.

cd angular-progressbar


ng g c progress-bar

Install Angular Material 9

Run the following command via Angular CLI to install the Angular Material library.

ng add @angular/material


? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

❯ Indigo/Pink        [ Preview: ] 
  Deep Purple/Amber  [ Preview: ] 
  Pink/Blue Grey     [ Preview: ] 
  Purple/Green       [ Preview: ]

? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes



Import Angular Material progress-bar


// app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {MatProgressBarModule} from '@angular/material/progress-bar';

  imports: [
  schemas: [ 

export class AppModule { }


  • Non-Angular elements named with dash case (-).
  • Element properties named with dash case (-). Dash case is the naming convention for custom elements.

Create Horizontal Progress Bar

The <mat-progress-bar> is a horizontal progress-bar for displaying progress activity for a specific on going process.

<mat-progress-bar value="40"></mat-progress-bar>


We used the mat-progress-bar attribute to display the progress bar and defined value=”50″. The value refers to the percentage which indicates the progress for on going event.

Let’s understand Progress mode in details.

Progress Mode Types

You can create different types of progress bars with Angular Material using the mode property. The progress-bar offers four various types of progress modes. We can use either of the Progress mode using mode property.

However, default mode type is determinate.

  • Determinate
  • Indeterminate
  • Buffer
  • Query

In the next step we will learn how to use progress mode to create animated progress bars.

Determinate Progress Bar



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

The value property shows the completion of the current process.

Determinate Progress Bar

Indeterminate Progress Bar

The indeterminate mode is used when we are not sure of how much time the process will complete.

We know in specific conditions we have to wait for an unknown duration or unless some process is accomplished. It could be sending some data to the server and waiting for a response.

In this case, we are completely unaware that how much time the process will take to be finished. So, we don’t define value in the mat-progress-bar.

<mat-progress-bar mode="indeterminate" *ngIf="isCompleted"></mat-progress-bar>

The *ngIf directive is used with mat-progress-bar attribute. It shows the progress bar only when the condition is true.

Indeterminate Progress Bar

Buffer mat-progress-bar Mode

The buffer mode is used to show activity or loading in various steps. If we try to understand in simple terms, then this means when we sub-divided single progress in multiple phases.

Buffer indicator intimates at every step where a task is completed.

<mat-progress-bar mode="buffer" value=30 bufferValue=60></mat-progress-bar>

You can see bufferValue and value with buffer mode. Here, bufferValue refers to the buffer indicator progress fog an ongoing event. Always set bufferValue higher than the value property.

Buffer progress-bar

Progress Bar Query Mode



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

Adding Style in Progress Bar


  • primary – Default theme
  • accent
  • warn
<mat-progress-bar color="accent" mode="determinate" value="40"></mat-progress-bar>

Properties of MatProgressBar Directive

Here are the various properties offered by the MatProgressBar.

valueIt refers to progress bar value. It ranges between 0 to 100 and 0 is the default value.
bufferValueIt refers to the Buffer value of the progress bar, and 0 is the default value.
modeTo display a various progress bar, we use mode property. It accepts determinate, indeterminate, buffer and query value.
colorTheme color palette for the component. It accepts accent, warn value and comes with primary as the default value.
progressbarIdID of the progress bar.
animationEndEvent emitted when animation of the primary progress bar completes. This event will not be emitted when animations are disabled, nor will it be emitted for modes with continuous animations (indeterminate and query).


The Angular Progress Bar tutorial is over. In this tutorial, we learned how to use Angular Material’s mat-progress-bar directive to show the progress of the ongoing event. To know more about Angular Material UI components, you must check out their documentation here.