projects/web-mev/src/app/shared/components/spinner-overlay/spinner-overlay.component.ts
Spinner Overlay Component
Used as an indicator of progress
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-spinner-overlay |
| styleUrls | ./spinner-overlay.component.scss |
| templateUrl | ./spinner-overlay.component.html |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
/**
* Spinner Overlay Component
*
* Used as an indicator of progress
*/
@Component({
selector: 'mev-spinner-overlay',
templateUrl: './spinner-overlay.component.html',
styleUrls: ['./spinner-overlay.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerOverlayComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}
<div class="overlay">
<div class="center">
<mat-spinner color="accent" diameter="40"></mat-spinner>
</div>
</div>
./spinner-overlay.component.scss
.overlay {
height: 100vh;
width: 100%;
background-color: rgba(230, 230, 230, 0.5);
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}