Css 如何在一次调用多个API时显示加载屏幕？

我正在使用Angular版本8编写一个应用程序，该应用程序将从不同的API向用户返回大量响应。
应用程序一次调用多个API以获取响应。我需要一个加载符号，一旦他们得到响应，该符号将停止加载。
它们的时间从几秒到一分钟不等。

---

如何实现这样的功能？

查看我在stackblitz上的示例：
我所做的是设置一个角度材质微调器和一个标记，我可以将API结果放在我的太阳穴中：

<button (click)="onFetch()" >Click me to send request</button>
<mat-spinner *ngIf="spin"></mat-spinner>
<p *ngIf="!spin">{{result}}</p>

---

一旦请求返回结果，就会执行

this.spin=false

，微调器不再可见。

只需创建一个加载变量，并在完成后将其设置为false即可。使用该加载变量作为显示加载程序的条件。您可以共享您请求的代码吗？

  onFetch() {
    this.spin = true
    ajax.getJSON(this.url)
    .pipe(
      delay(1000)
    )
    .subscribe(json => {
      this.spin = false
      this.result = json.value
    })
  }