Me inspiré en: Anular el tamaño y el estilo del material angular de md-dialog-container

Lo resolví así:

Crear un nuevo componente

Crear un nuevo componente ProgressSpinnerDialogComponent

El contenido de progreso-spinner-dialog.component.html:

 <mat-spinner></mat-spinner>

El contenido de progreso-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() { } }

Agregar un estilo

En estilos.css agregar:

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

Usar el componente

Aquí un ejemplo de uso de la rueda de progreso:

 import { Component, OnInit } from '@angular/core'; import { MatDialog, MatDialogRef } from "@angular/material/dialog"; 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<Object>) { let dialogRef: MatDialogRef<ProgressSpinnerDialogComponent> = this.dialog.open(ProgressSpinnerDialogComponent, { panelClass: 'transparent', disableClose: true }); let subscription = observable.subscribe( (response: any) => { subscription.unsubscribe(); //handle response console.log(response); dialogRef.close(); }, (error) => { subscription.unsubscribe(); //handle error dialogRef.close(); } ); } }

Agréguelo a la aplicación.módulo

 declarations: [...,ProgressSpinnerDialogComponent,...], entryComponents: [ProgressSpinnerDialogComponent],

Use el siguiente código para lograr el opaco:

HTML

 <div style="height: 800px" [class.hide]="show"> <button class="btn btn-success" (click)="showSpinner()">Show spinner</button> </div> <app-spinner [show]="show" [size]="150"></app-spinner>

COMPONENTE

 import { Component, Input } from '@angular/core'; @Component({ selector: 'app-spinner', template: ` <i aria-hidden="true" class="fa fa-spinner fa-spin" [style.font-size.px]="size" *ngIf="show"></i> ` }) export class SpinnerComponent { @Input() size = 50; @Input() show = false; showSpinner() { this.show = true; } }

CSS

 .hide { opacity: 0; }

DEMO EN VIVO

Basado en un enfoque un poco diferente: dos componentes, primero para abrir el cuadro de diálogo, el segundo es el cuadro de diálogo. En el componente que desea mostrar el control giratorio, simplemente agregue:

<app-dialog-spinner *ngIf="progressSpinner"></app-dialog-spinner>

Y controla el * ngIf en tu lógica. Arriba está todo lo que necesita para llamar a la ruleta para que el componente se mantenga limpio y ordenado.

Componente giratorio de diálogo:

 import { Component, OnInit, OnDestroy } from '@angular/core'; import { MatDialog, MatDialogRef } from '@angular/material'; // Requires a transparent css (panel)id in a parent stylesheet eg: // #DialogSpinnerComponent { // box-shadow: none !important; // background: transparent !important; // } @Component({ selector: 'app-do-not-use', template: `<mat-spinner></mat-spinner>`, styles: [] }) export class DialogSpinnerDialogComponent { } @Component({ selector: 'app-dialog-spinner', template: ``, styles: [] }) export class DialogSpinnerComponent implements OnInit, OnDestroy { private dialog: MatDialogRef<DialogSpinnerDialogComponent>; constructor( private matDialog: MatDialog, ) { } ngOnInit() { setTimeout(() => { this.dialog = this.matDialog.open(DialogSpinnerDialogComponent, { id: 'DialogSpinnerComponent', disableClose: true }); }); } ngOnDestroy() { setTimeout(() => { this.dialog.close(); }); } }

Declare los componentes en su módulo y, por supuesto, registre DialogSpinnerDialogComponent en sus componentes de entrada. Agregue las propiedades css a una hoja de estilo principal. Esto probablemente se puede mejorar, pero estoy un poco presionado por el tiempo.