Angular Material 9|8 Progress Bar Loader Example Tutorial

In this post, we will discuss How to Implement the Progress bar in Angular application using the Material library.

Angular Material provides a wide range of web components that are very easy to implement and use in Angular applications.

Here we will create a new Angular project using CLI and discuss How to use Progress bar with different options and types. A progress bar is a horizontal line with animation to indicate that a process is number progress which can be related to document o image upload or some server transaction.

It is used to indicate a process status which can be a determinate process which shows a percentage of task completed and left or indeterminate which just indicates that the process is under progress but not know how much time it will take.

In Angular Material, a Progress bar is implemented by adding a mat-progress-bar component available in the MatProgressBarModule.

 

Let’s start to implement …

 

# Setup Angular CLI

We’ll create Angular project in the latest version. Make sure you have updated the Angular CLI tool by running below npm command in the terminal

$ npm install -g @angular/cli

 

# Create an Angular Project

Execute below ng command to create an Angular project in the latest version 9.1.3. But this tutorial is compatible with previous version 7,6,5 and 4

$ ng new angular-material-loaders
$ cd angular-material-loaders

# Install Angular Material in project

After version 8, Angular Material package can be installed by executing the following ng command. For configuration, it will ask a few questions related to the theme, browser animations etc

$ ng add @angular/material

Answer questions

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Now our Angular project is ready to use Material components.

 

# Import Material Modules

The Material UI library provides a wide variety of components, so we need to import the API module of the component we are going to use in the App module.

Here as we’ll be using the Progress Bar so we need to import MatProgressBarModule in the app.module.ts file as shown below

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,

    MatProgressBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

# Adding a Progress bar

The Progress Bar UI component of the Material library is implemented using the mat-progress-bardirective in the template. It is shown as a Horizontal bar which shows progress as an animated effect in between.

<mat-progress-bar
          [mode]="'indeterminate'">
</mat-progress-bar>

Option Properties

[mode]: The Progress Bar can have four types of modes

‘determinate‘: This property takes a number in the value property from 0 to 100 showing progress

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

 

‘indeterminate‘: Shows animated bar in the forward direction

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

‘buffer‘: This takes the value and the bufferValue depicting the loaded and remaining

<mat-progress-bar mode='buffer' value='35' bufferValue='66'></mat-progress-bar>

‘query‘: This model depicts the query is in progress but not resolved yet

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

 

Also, check How to show loaders during HTTP call in Angular application using Interceptors.

That’s all you can try these loaders in place of simple loading text making your application UI more professional and interactive.