blocking-progress.component.html

<div class="blocking-loading-overlay" *ngIf="isLoading">
    <div>
        <app-spinner [fill]="'#aaa'" [margin]="'20px auto'"></app-spinner>
        <p>{{loadingMessage}}</p>
    </div>
</div>

blocking-progress.component.scss

.blocking-loading-overlay {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blocking-loading-overlay > div {
    background: white;
    padding: 32px;
    text-align: center;
}

blocking-progress.component.ts

import { Component, OnInit } from '@angular/core';
import { BlockingProgressService } from './blocking-progress.service';

@Component({
    selector: 'blocking-progress',
    templateUrl: './blocking-progress.component.html',
    styleUrls: [ './blocking-progress.component.scss']
})

export class BlockingProgressComponent implements OnInit {

    isLoading: boolean = false;
    loadingMessage: string;

    constructor(private _blockingProgressService: BlockingProgressService) {}

    ngOnInit() {
        this._blockingProgressService.isLoading.subscribe(value => {
            this.isLoading = value;
        });
        this._blockingProgressService.loadingMessage.subscribe(value => {
            this.loadingMessage = value;
        });
    }
}