Angular Material Progress Spinner

By Arvind Rai, October 27, 2022

On this page we will learn to use Material progress spinner in our Angular Material application.
1. To create a progress spinner, Angular Material provides <mat-progress-spinner> component.
2. The <mat-progress-spinner> component creates a circular indicators of progress and activity.
3. The properties of <mat-progress-spinner> component are color, diameter, mode, strokeWidth and value.
4. The progress-spinner can have determinate and indeterminate progress mode.
5. The size of the progress-spinner is controlled by diameter property.
6. We can change the color theme by color property.
7. To use <mat-progress-spinner> in our code, we need to import following module in our application module.

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

Now let us discuss Angular Material progress-spinner with example.

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0

Creating Progress Spinner

The mat-progress-spinner is the selector of MatProgressSpinner directive. It has following properties.
color : Theme color palette for the component i.e. accent, warn and primary.
diameter : The diameter of the progress spinner.
mode : Mode of the progress circle that are determinate and indeterminate.
strokeWidth : Stroke width of the progress spinner.
value : Value of the progress circle.

We create progress-spinner using mat-progress-spinner as following.
Using determinate mode : In determinate mode, progress indicator fills from 0% to 100%. It is used when loading percentage is known.

<mat-progress-spinner
  color="primary"
  mode="determinate"
  [value]="loadingPercent"
  strokeWidth="0"
  diameter="50">
</mat-progress-spinner>

Using indeterminate mode : In indeterminate mode, progress spinner indicates that something is happening without conveying a discrete progress.

<mat-progress-spinner
  color="primary"
  mode="indeterminate"
  strokeWidth="0"
  diameter="50"> 
</mat-progress-spinner>

Complete Example

app.component.html

<h2>Progress Spinner with Percentage (determinate)</h2>

<div *ngIf="!isStart; else start">
    <button mat-raised-button (click)="startLoading()">Start Loading</button>
</div>
<ng-template #start>
    <div *ngIf="res | async as msg; else loading">
        <b>{{msg}}</b>
    </div>
    <ng-template #loading>
      <mat-progress-spinner
        color="primary"
        mode="determinate"
        [value]="loadingPercent"
        strokeWidth="0"
        diameter="50">
      </mat-progress-spinner>
   </ng-template>
</ng-template>

<h2>indeterminate</h2>

<mat-progress-spinner
  color="primary"
  mode="indeterminate"
  strokeWidth="0"
  diameter="50">
</mat-progress-spinner>

app.component.ts

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  isStart = false;
  res: Observable<null | string> = of(null);
  loadingPercent = 0;
  intervalId = {} as any;
  startLoading() {
    this.isStart = true;
    this.intervalId = setInterval(() => {
      if (this.loadingPercent < 100) {
        this.loadingPercent += 1;
      } else {
        clearInterval(this.intervalId);
        this.res = of("Item Loaded");        
      }
    }, 250);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.