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</pre>
 
<h3># Create an Angular Project</h3>
Execute below <code>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</pre>
<h3></h3>
<h3># Install Angular Material in project</h3>
After version 8, Angular Material package can be installed by executing the following <code>ng command. For configuration, it will ask a few questions related to the theme, browser animations etc
$ ng add @angular/material</pre>
Answer questions
<pre class="wp-block-prismatic-blocks"><code class="language-javascript">? 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</pre>
Now our Angular project is ready to use Material components.

 
<h3># Import Material Modules</h3>
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 <code>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></pre>
 

<strong>Option Properties</strong>

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

<strong>[mode]</strong>: 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></pre>
<img class="wp-image-4036 size-full aligncenter" src="https://www.freakyjolly.com/wp-content/uploads/2019/04/Pasted-into-Angular-98-Material-Progress-Spinner-and-Loader-Bar-Example.png" />

<code><strong>[diameter]</strong>: The diameter of the spinner can be changed effecting its size.
<mat-progress-spinner mode="determinate" value='66' diameter="45"></mat-progress-spinner></pre>
<img class="wp-image-4037 size-full aligncenter" src="https://www.freakyjolly.com/wp-content/uploads/2019/04/Pasted-into-Angular-98-Material-Progress-Spinner-and-Loader-Bar-Example-1.png" />
<div>
<div><strong><code>strokeWidth: Its the width of the 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></pre>
<a href="https://www.freakyjolly.com/wp-content/uploads/2019/04/angular-material-spinner-demo1.gif"><img class="aligncenter size-full wp-image-4038" src="https://www.freakyjolly.com/wp-content/uploads/2019/04/angular-material-spinner-demo1.gif" alt="" width="55" height="112" /></a>

</div>
</div>
 

<a href="http://www.freakyjolly.com/wp-content/uploads/2019/04/am-spinner.gif"><img class="aligncenter size-full wp-image-2394" src="http://www.freakyjolly.com/wp-content/uploads/2019/04/am-spinner.gif" alt="" width="164" height="138" /></a>

Check more details on HTTP loader <a href="http://www.freakyjolly.com/angular-8-7-show-global-progress-bar-loader-on-http-calls-in-3-steps-using-angular-interceptors-in-angular-4-3/" target="_blank" rel="noopener noreferrer">here </a>
<h2 tabindex="-1"></h2>
<h2 tabindex="-1"># Adding a Progress bar</h2>
The Progress Bar UI component of the Material library is implemented using the <code>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></pre>
<a href="http://www.freakyjolly.com/wp-content/uploads/2019/04/am-bar.gif"><img class="aligncenter size-full wp-image-2395" src="http://www.freakyjolly.com/wp-content/uploads/2019/04/am-bar.gif" alt="" width="366" height="49" /></a>

<strong>Option Properties</strong>

<strong><code>[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></pre>
<img class="wp-image-4039 size-full aligncenter" src="https://www.freakyjolly.com/wp-content/uploads/2019/04/Pasted-into-Angular-98-Material-Progress-Spinner-and-Loader-Bar-Example-2.png" />

 

'<code>indeterminate': Shows animated bar in the forward direction
<mat-progress-bar mode='indeterminate'></mat-progress-bar></pre>
<a href="https://www.freakyjolly.com/wp-content/uploads/2019/04/angular-material-spinner-demo2.gif"><img class="aligncenter size-full wp-image-4040" src="https://www.freakyjolly.com/wp-content/uploads/2019/04/angular-material-spinner-demo2.gif" alt="" width="210" height="34" /></a>

'<code>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></pre>
<a href="https://www.freakyjolly.com/wp-content/uploads/2019/04/angular-material-spinner-demo3.gif"><img class="aligncenter size-full wp-image-4041" src="https://www.freakyjolly.com/wp-content/uploads/2019/04/angular-material-spinner-demo3.gif" alt="" width="210" height="34" /></a>

'<code>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.
Category: Angular