src/app/shared/components/spinner-overlay/spinner-overlay.component.ts
Overlay component that displays a progress spinner and an optional text description.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-spinner-overlay |
| styleUrls | ./spinner-overlay.component.scss |
| templateUrl | ./spinner-overlay.component.html |
Properties |
|
Inputs |
HostBindings |
| active | |
Type : boolean
|
|
Default value : false
|
|
|
Whether the overlay is active/showing. |
|
| text | |
Type : string
|
|
|
Optional text description displayed alongside the spinner. |
|
| class |
Type : "ccf-spinner-overlay"
|
Default value : 'ccf-spinner-overlay'
|
|
HTML class |
| Readonly className |
Type : string
|
Default value : 'ccf-spinner-overlay'
|
Decorators :
@HostBinding('class')
|
|
HTML class |
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
/**
* Overlay component that displays a progress spinner and
* an optional text description.
*/
@Component({
selector: 'ccf-spinner-overlay',
templateUrl: './spinner-overlay.component.html',
styleUrls: ['./spinner-overlay.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SpinnerOverlayComponent {
/** HTML class */
@HostBinding('class') readonly className = 'ccf-spinner-overlay';
/** Whether the overlay is active/showing. */
@Input() @HostBinding('class.active') active = false;
/** Optional text description displayed alongside the spinner. */
@Input() text!: string;
}
<mat-spinner></mat-spinner>
<div class="content">{{ text }}</div>
./spinner-overlay.component.scss
:host {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition:
visibility 0.6s,
opacity 0.4s ease-in-out;
mat-spinner {
margin-bottom: 1rem;
opacity: 0;
transition: opacity 0.3s ease-in-out 0.3s;
}
&.active {
pointer-events: auto;
visibility: visible;
opacity: 1;
mat-spinner {
opacity: 1;
}
}
}