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

Use the below code to achieve the opaque:

HTML

   Show spinner

COMPONENT

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

@Component({
    selector: 'app-spinner',
    template: `
      
    `
})
export class SpinnerComponent {
  @Input() size = 50;
  @Input() show = false;
  
  showSpinner() {
    this.show = true;
  }
}

CSS

.hide {
  opacity: 0;
}

LIVE DEMO