Angular 9 - Angular Material Progress Bar Tutorial Example

About
Modern applications regularly deal with asynchronous operations, whether it is an API request or a timer event. In most of these cases, we would like to see that there’s a process we’re waiting for, and a progress bar or spinner is a great way to demonstrate that.
When I looked at existing solutions, I found that — whether the solution uses NgRx or not — it supports only one progress bar in the application, but I want to support many.

Let’s consider this in the case of opening articles. When the images are loading, we want to see spinners instead of images that are not loading. We need to associate each async process with its own progress bar. E.g. if we start loading two icons for user1 and admin, and we try to log in at the same time, we should get three progress bars:
1. User1 progress bar.
2. Admin progress bar.
3. Login progress bar.
Introduce:
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.

In this tutorial, we are going to discuss how to use mat-progress-bar in an Angular app to display the progression of an event to the user.

The mat-progress-bar is initialized using the Angular Material’s MatProgressBarModule module.
Angular Project
To understand this tutorial better, we have to install a brand new Angular project, and however if you have already set up the Angular project, then you can skip this step.
Just run the following command to get started.

ng new angular-progressbar

Create a specific component for demonstrating the Angular 9 progress bar example.

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

Go to styles.css file and add the angular material’s theme styling file.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Import Angular Material progress-bar
 To start working with the progress bar, we have to import MatProgressBarModule API from ‘@angular/material/progress-bar’ library in app.module.ts file.

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {MatProgressBarModule} from '@angular/material/progress-bar';
@NgModule({
  imports: [
    MatProgressBarModule
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule { }

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>

Let’s move one step further and understand how to create a horizontal progress bar in an Angular app using material design UI component.
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.
Determinate Progress Bar
Operations where the percentage of the operation complete is known should use the determinate indicator.

The determinate mode is used when we we know the progress completion time in advance.

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

The value property shows the completion of the current process.
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.
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.
Progress Bar Query Mode
What if you need to show the pre-loading of the progress bar, in this case, the Query mode is going to be very useful for you.

In query mode, when the loading starts, the mode automatically converts to determinate or indeterminate and starts displaying the ongoing progress of the current process.

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

Adding Style in Progress Bar
Updating the color of a specific progress-bar is merely effortless, we need to use the colour property and pass either of the pre-defined color themes of material design.
primary – Default theme
accent
warn

<mat-progress-bar color="accent" mode="determinate" value="40"></mat-progress-bar>