I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular?
Here is the HTML code snippet:
<div *ngIf="showLoadingIndicator" class="spinner"></div>
Below is the component.ts file content:
import { Component, OnInit } from '@angular/core';
import { Event, Router, NavigationStart, NavigationEnd,NavigationCancel,
NavigationError } from '@angular/router';
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {
loading = true
showLoadingIndicator = true;
constructor(public router: Router) {
this.router.events.subscribe((routerEvent: Event) => {
if (routerEvent instanceof NavigationStart) {
this.showLoadingIndicator = true
}
if (routerEvent instanceof NavigationEnd) {
this.showLoadingIndicator = false
}
if (routerEvent instanceof NavigationError){
this.showLoadingIndicator = false
}
if(routerEvent instanceof NavigationCancel){
this.showLoadingIndicator = false
}
});
}
This is the relevant CSS styling for the spinner:
.spinner {
border :16px solid silver;
border-top: 16px solid #337AB7;
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 700ms linear infinite;
top: 50%;
left: 50%;
position: absolute;
}
@keyframes spin {
0% {transform: rotate(0deg)}
100%{transform: rotate(-360deg)}
}
If anyone can provide insight into what might be causing the issue, I would greatly appreciate it. Thank you in advance.