角度2素材進行スピナー：オーバーレイとして表示

Question

角度2素材進行スピナーを現在のビュー（ページまたはモーダルダイアログ）のやや透明なオーバーレイとして表示するにはどうすればよいですか？

Answer 1

不透明

HTML

<div style="height:800px" [class.ops]="show"> 
    <h2 [class.opaque]="trans">{{name}}</h2> 
    <button class="btn btn-success" (click)="toggleSpinner()"> See spinner </button> 
</div> 
<spinner [show]="show" [size]="150"> </spinner> 

COMPONENT

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

@Component({ 
    selector: 'spinner', 
    template: ` 
     <div *ngIf="show"> 
      <span> 
      <i class="fa fa-spinner fa-spin" [ngStyle]="{'font-size': size+'px'}" aria-hidden="true"></i> 
      </span> 
     </div> 
    ` 
}) 
export class SpinnerComponent { 
    @Input() size: number = 50; 
    @Input() show: boolean; 

    toggleSpinner() { 
     this.show = !this.show; 
     this.trans=!this.trans; 
    } 

} 

CSS

を達成するために以下のコードを使用します

.ops { 
    opacity :0; 
} 

LIVE DEMO

Answer 2

私が触発されたが：Overriding Angular Material Size and Styling of md-dialog-container

これは私がそれを解決する方法である：

進捗-スピナーdialog.component.htmlの内容に新しいコンポーネントProgressSpinnerDialogComponentを作成します。

<mat-spinner></mat-spinner> 

in styles.css add：

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

コンポーネントを開いて、panelClassプロパティを設定します。

this.dialog.open(ProgressSpinnerDialogComponent, { panelClass: 'transparent' });