Angular 9|8|7 Material Loading Progress Spinner and Loader Bar Example

In a web application, we generally show a process status by graphical indicators like progress bars and spinners. In this post, we will discuss How to Implement the most common progress indicator Progress bar and Spinners.

Angular Material provides a wide range of web components which 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 and Spinning Loader. These are of two types Determinate and Indeterminate.

Determinate type of loaders show the progress of processes which can be indicated to users in terms of percentage of work done from 0 to 100%

Indeterminate loaders show progress with animation to indicate the process is going on and completion and the current status are not known.

Let’s start to implement …

# Setup Angular CLI

We’ll create Angula 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 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 Spinner and Progress Bar so we need to import MatProgressSpinnerModule and 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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';

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

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

# Adding Progress spinner

The Progress spinner is implemented by adding the mat-progress-loader component in the template.

Now you only need to add the following template where you want to show it

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

Option Properties

[color]: Color of the Spinner loader can be changed eg 'primary', 'accent', 'warn'

[mode]: The Spinner can be used as a loader or depict progress in percentage 0 to 100. To switch we set [mode] with 'determinate' (progress) or 'indeterminate' (loader)

[value]: When [mode] is set to 'determinate' we can pass percentage as value to show progress

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

[diameter]: The diameter of the spinner can be changed effecting its size.

<mat-progress-spinner mode="determinate" value='66' diameter="45"></mat-progress-spinner>

  <mat-progress-spinner mode="indeterminate" diameter='30' strokeWidth='10'></mat-progress-spinner>
  <br />
  <br />
  <mat-progress-spinner mode="indeterminate" diameter='20' strokeWidth='50'></mat-progress-spinner>

Check more details on HTTP loader here

# 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 mode 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.