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.