Angular Material 13 Integrate Progress Spinner Tutorial

This simple tutorial will teach you how to integrate loading spinner to an Angular application using the angular material library.

Loading spinners shows the progress of an ongoing event. In this angular material loading spinner example, we will use the material library to create a progress spinner in the angular app.

Throughout this guide, you will learn from simple code examples on how to create a progress spinner component in angular.

Also, we will show you how to set up the angular material modules in the angular app so that you can manage the material library pretty eloquently for UI development.

The progress spinners are invoked using the mat-progress-spinner and mat-spinner directives; these are circular indicators of progress and activity.

How to Display Progress Spinner in Angular with Mat Progress Spinner

  • Step 1: Create Angular Project
  • Step 2: Add Angular Material Library
  • Step 3: Register Material Modules
  • Step 4: Create Simple Spinner Component
  • Step 5: Change Mat Progress Spinner Color
  • Step 6: Run Angular App

Create Angular Project

Install angular CLI in your system with given command.

npm install -g @angular/cli

Execute following command from the terminal to build a new angular app.

ng new ng-material-demo

Next, enter in the application folder.

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Add Angular Material Library

Run the given command from the terminal’s command prompt to add the angular material package in angular.

ng add @angular/material

Choose the suggested options on your terminal:

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Afterward, define the prebuilt theme’s CSS in src/styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Register Material Modules

Make src/material.module.ts file, the main module we need in this file is MatProgressSpinnerModule although we will also import other material modules so that you may create any material UI component if need in future.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

In this step, you have to open the app/app.module.ts file and import the MaterialModule, FormsModule, ReactiveFormsModule and CUSTOM_ELEMENTS_SCHEMA modules.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Create Simple Spinner Component

Head over to app.component.html file, in this component you have to define the mat-spinner directive this will display the loading progress bar in angular.

<h2>Angular Material Basic Loading Spinner Example</h2>

<mat-spinner></mat-spinner>

Change Mat Progress Spinner Color

There are three color themes that you can add to the progress bar, you may try Primary, Accent and Warn options.

<!-- Color options: Primary | Accent | Warn -->

<mat-spinner color="accent"></mat-spinner>

Run Angular App

Start the application’s development server that will start your app on the browser.

ng serve --open

Angular Material 13 Integrate Progress Spinner Tutorial

Conclusion

Angular Material is a handy UI library, and It speeds up UI development work without bothering you about writing the code from scratch.

In this short post, you learned how to implement a progress spinner with angular material. Not just that, we also highlighted how to change the colors of loading progress spinners in angular.

You can know more about material progress here.