Angular 2 Material Progress Spinner: display as overlay

Question

How to display the Angular 2 Material Progress Spinner as a somewhat transparent overlay of the current view (a page or a modal dialog)?

Answer 1

I was inspired by: Overriding Angular Material Size and Styling of md-dialog-container

I solved it like this:

Create a New Component

Create a new component ProgressSpinnerDialogComponent

The content of progress-spinner-dialog.component.html:

The content of progress-spinner-dialog.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-progress-spinner-dialog',
  templateUrl: './progress-spinner-dialog.component.html',
  styleUrls: ['./progress-spinner-dialog.component.css']
})
export class ProgressSpinnerDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Add a Style

In styles.css add:

.transparent .mat-dialog-container {
    box-shadow: none;
    background: rgba(0, 0, 0, 0.0);
}

Use the Component

Here an example usage of the progress spinner:

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from "@angular/material";
import { Observable } from "rxjs";
import { ProgressSpinnerDialogComponent } from "/path/to/progress-spinner-dialog.component";

@Component({
  selector: 'app-use-progress-spinner-component',
  templateUrl: './use-progress-spinner-component.html',
  styleUrls: ['./use-progress-spinner-component.css']
})
export class UseProgressSpinnerComponent implements OnInit {

  constructor(
    private dialog: MatDialog
  ) {
    let observable = new Observable(this.myObservable);
    this.showProgressSpinnerUntilExecuted(observable);
  }

  ngOnInit() {
  }

  myObservable(observer) {
    setTimeout(() => {
      observer.next("done waiting for 5 sec");
      observer.complete();
    }, 5000);
  }

  showProgressSpinnerUntilExecuted(observable: Observable