Angular 7 custom loader

app.component.ts

<custom-loader></custom-loader>

custom-loader.component.html

<div [class.hidden]="!show">
  <div *ngIf="show" class="loader-overlay">
    <div class="loader-bar"></div>
    <div class="loader-spinner"></div>
  </div>
</div>

custom-loader.component.scss

.hidden {
  visibility: hidden;
}

.loader-overlay {
  position: fixed;
  background: rgba(0,0,0,0.4);
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  display:block;
  margin: 0 auto;
  overflow: hidden;
  z-index: 9999;
}

.loader-bar {
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000000;

  &:before {
    display: block;
    position: absolute;
    content: "";
    left: -200px;
    width: 200px;
    height: 4px;
    background-color: #ffffff;
    animation: loading 2s linear infinite;
  }
}

.loader-spinner {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('/assets/img/loader/spinner.gif') 50% 50% no-repeat;
  opacity: 0.7;
  background-size: 75px 75px;
}

@keyframes loading {
  from {left: -200px; width: 30%;}
  50% {width: 30%;}
  70% {width: 70%;}
  80% {left: 50%;}
  95% {left: 120%;}
  to {left: 100%;}
}

custom-loader.component.ts

@Component({
  selector: 'custom-loader',
  templateUrl: './custom-loader.component.html',
  styleUrls: ['./custom-loader.component.scss']
})
export class CustomLoaderComponent implements OnInit, OnDestroy {

  public destroy$: Subject<boolean> = new Subject<boolean>();

  public show = false;

  constructor(private loaderService: CustomLoaderService) { }

  ngOnInit() {
    this.loaderService.getLoaderState()
    .pipe(
      takeUntil(this.destroy$)
    )
    .subscribe(state => {
      this.show = state.show;
      this.setScrollBarVisibility(!this.show);
    });
  }

  private setScrollBarVisibility(visible: boolean) {
    document.body.style.overflow = visible ? 'auto' : 'hidden';
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }

}

custom-loader.service.ts

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

  private loaderSubject = new Subject<ILoaderState>();
  private loaderState = this.loaderSubject.asObservable();
  private timeout: any;

  constructor() { }

  public getLoaderState(): Observable<ILoaderState> {
    return this.loaderState;
  }

  public show(delay?: number) {
    if (delay) {
      this.timeout = setTimeout(() => this.loaderSubject.next(<ILoaderState>{ show: true }), delay);
    } else {
      this.loaderSubject.next(<ILoaderState>{ show: true });
    }
  }

  public hide() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
    this.loaderSubject.next(<ILoaderState>{ show: false });
  }

}