Post
Ask Question

Loading Mask For Angular Using CSS

In this article I would like to explain how to display a loader mask for all the pages in Angular applications that disables the underlying html elements while the page is loading or during postbacks, using CSS.

Using the loader we are able to prevent any mouse activity on screen until the page gets loaded completely. This provides the application with loading spinner to indicate async operations.

Create a Loader Component

Loader.component.html

Paste the below code in Loader component html file.

  1. <style>  
  2.     .loadWrapper {  
  3.      background: rgba(0,0,0,0.3);  
  4.     width: 100%;  
  5.     height: 100%;  
  6.     position: fixed;  
  7.     top:0px;  
  8.     left:0px;  
  9.     z-index: 99999;  
  10.     }  
  11. </style>  
  12. <div class="loadWrapper" *ngIf="loader">  
  13.     <div class="loader">  
  14.         <svg class="circular" viewBox="25 25 50 50">  
  15.             <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />  
  16.         </svg>  
  17.     </div>  
  18. </div>  

Then create a ts file and paste the below code.

Loader.component.ts

  1. import { Component, Input, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-loader',  
  5.     templateUrl: './loader.component.html'  
  6. })  
  7.   
  8. export class LoaderComponent implements OnInit  {  
  9.     @Input() loader:boolean = false;  
  10.   
  11.     constructor ()  {}  
  12.   
  13.     ngOnInit() { }  
  14. }  

Import the component

Import the loader Component in the root application module as shown below

  1. import { LoaderComponent } from './components/loader/loader.component';  
  2.   
  3. @NgModule({  
  4.   declarations: [  
  5.         .  
  6.         .  
  7.         LoaderComponent],  
  8. exports: [LoaderComponent  
  9.   ],  

Include the loader component in other components

Next, add the loading component selector to the other application component template. We can use the loader component in other pages where we want to display the loader image during page load and where the loader icon view used to be.

Add this Html tag anywhere in the view,

<app-loader [loader]="isLoading"></app-loader>

isLoading can be used as an Angular property binding. It is a one way data binding from the isLoading property of the related component to the loader property of the loader component. This Boolean is used as an input to the Loader component and will determine when the loader spinner needs to visible.

Now whenever the page loads or any operation triggers in the site page we need to set isLoading property initially as true to display the Loading Icon over the html view. At the end of the logic or after it finishes loading all the data set isLoading property as false to hide the icon and to display the html view normally.

  1. Submit(){  
  2. this.isLoading = true;  
  3.         this.dataService.httpGet("../..")  
  4.             .subscribe((data: any) => {  
  5.              //load data          
  6.                 this.isLoading = false;  
  7.   
  8.             },  
  9.             err => {  
  10.                 this.isLoading = false;  
  11.             }  
  12.             );  
  13.     }  

With this we now have a loading spinner that is created entirely using CSS and placed inside the html component template view where we can set / unset the loading spinner. Here is the screenshot of the spinner image that prevents the user from click or performing any other mouse activity over the screen.

Summary

In this article, we have explored how to create a loader mask using CSS for all the pages in Angular applications that disables the click events until the page gets loaded completely.


Similar Articles