src/components/pageLoading/pageLoading.component.ts
Component for showing a loading spinner on the whole page.
OnInit
OnDestroy
| selector | app-page-loading |
| styleUrls | pageLoading.component.scss |
| templateUrl | pageLoading.component.html |
Properties |
|
Methods |
constructor(pageLoadingService: PageLoadingService)
|
||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public isLoading |
Type : boolean
|
| Private Readonly subscriptions |
Type : Array<Subscription>
|
Default value : new Array<Subscription>()
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { PageLoadingService } from 'services/pageLoading.service';
/**
* Component for showing a loading spinner on the whole page.
*/
@Component({
selector: 'app-page-loading',
templateUrl: 'pageLoading.component.html',
styleUrls: ['pageLoading.component.scss'],
})
export class PageLoadingComponent implements OnInit, OnDestroy {
public isLoading: boolean;
private readonly subscriptions: Array<Subscription> = new Array<Subscription>();
constructor(
private pageLoadingService: PageLoadingService,
) { }
ngOnInit(): void {
this.subscriptions.push(this.pageLoadingService.watchLoading().subscribe(
(isLoading: boolean) => {
this.isLoading = isLoading;
}
));
}
ngOnDestroy() {
this.subscriptions.forEach(s => {
s.unsubscribe();
});
}
}
<!--
Copyright 2021 EPOS ERIC
Licensed under the Apache License, Version 2.0 (the License); you may not
use this file except in compliance with the License. You may obtain a copy
of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an AS IS BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<div class="loading" *ngIf="isLoading">
<div class="loading_spinner"></div>
</div>
pageLoading.component.scss
/*
Copyright 2021 EPOS ERIC
Licensed under the Apache License, Version 2.0 (the License); you may not
use this file except in compliance with the License. You may obtain a copy
of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an AS IS BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
*/
.loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100000;
background-color: rgba(0, 0, 0, .55);
&_spinner {
border: 8px solid #f3f3f3; // Light grey
border-top: 8px solid #555;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
margin: 50vh 50vw;
box-sizing: border-box;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}