Angular Material 7 - Progress Spinner

The <mat-progress-spinner>, an Angular Directive, is used to show a progress spinner with material styling.

In this chapter, we will showcase the configuration required to draw a deterministic as well as indeterministic progress spinner using Angular Material.

Create Angular Application

Follow the following steps to update the Angular application we created in Angular 6 - Project Setup chapter −

Step Description
1 Create a project with a name materialApp as explained in the Angular 6 - Project Setup chapter.
2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatProgressSpinnerModule, MatRadioModule, MatSliderModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
   declarations: [
   imports: [
      MatProgressSpinnerModule, MatRadioModule, MatSliderModule,
   providers: [],
   bootstrap: [AppComponent]
export class AppModule { }

Following is the content of the modified ts file app.component.css.

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
.tp-margin {
   margin: 0 10px;

Following is the content of the modified HTML host file app.component.html.

<section class = "tp-section">
   <label class = "tp-margin">Color:</label>
   <mat-radio-group [(ngModel)] = "color">
      <mat-radio-button class = "tp-margin" value = "primary">
      <mat-radio-button class = "tp-margin" value = "accent">
      <mat-radio-button class = "tp-margin" value = "warn">
<section class = "tp-section">
   <label class = "tp-margin">Mode:</label>
   <mat-radio-group [(ngModel)] = "mode">
      <mat-radio-button class = "tp-margin" value = "determinate">
      <mat-radio-button class = "tp-margin" value = "indeterminate">
<section class = "tp-section" *ngIf = "mode === 'determinate'">
   <label class = "tp-margin">Progress:</label>
   <mat-slider class = "tp-margin" [(ngModel)] = "value"></mat-slider>
<section class = "tp-section">
   <label class = "tp-margin">Mode: {{mode}}</label>
      class = "tp-margin"
      [color] = "color"
      [mode] = "mode"
      [value] = "value">

Following is the content of the modified ts file app.component.ts.

import { Component } from '@angular/core';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
export class AppComponent {
   title = 'materialApp'; 
   color = 'primary';
   mode = 'determinate';
   value = 50;


Verify the result.

Progress Spinner


  • Here, we've created progress spinner using mat-progress-spinner.
Kickstart Your Career

Get certified by completing the course

Get Started