spinner-component.html

<div class="page-overlay-wrapper" *ngIf="showSpinner">
    <div class="bee-spinner"></div>
</div>

spinner-component.scss

@keyframes bouncing {
  0% {
    top: 40%;
  }
  100% {
    top: 30%;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.page-overlay-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1009;
  background: rgba(112, 191, 93, 0.5);

  .bee-spinner {
    width: 20%;
    height: 20%;
    position: fixed;
    top: 40%;
    left: calc(50% - 10%);
    z-index: 100;
    background-image: url(../../assets/bee-spinner.png);
    background-repeat: no-repeat;
    background-size: 97%;
    animation: bouncing 0.4s cubic-bezier(0.1, 0.25, 0.1, 1) 0s infinite
      alternate both;
  }
}

spinner-component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { SpinnerService } from './spinner.service';

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

  showSpinner = false;

  constructor(private spinnerService: SpinnerService, private cdRef: ChangeDetectorRef) {

  }

  ngOnInit() {
    this.init();
  }

  init() {

    this.spinnerService.getSpinnerObserver().subscribe((status) => {
      this.showSpinner = (status === 'start');
      this.cdRef.detectChanges();
    });
  }

}

spinner.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {

  private count = 0;
  private spinner$ = new BehaviorSubject<string>('');

  constructor() { }

  getSpinnerObserver(): Observable<string> {
    return this.spinner$.asObservable();
  }

  requestStarted() {
    if (++this.count === 1) {
      this.spinner$.next('start');
    }
  }

  requestEnded() {
    if (this.count === 0 || --this.count === 0) {
      this.spinner$.next('stop');
    }
  }

  resetSpinner() {
    this.count = 0;
    this.spinner$.next('stop');
  }
}

nice one for spinner