Add support to disable any user interactions with the application when it is loading about ngx-loading-bar HOT 4 CLOSED

yep that's true, adding an example in the demo would be helpful for a newcomers ;)

from ngx-loading-bar.

It is a nice idea but you really can do it by yourself.
I mean the module has LoadingBarService so this is enough for almost all stuff :)

from ngx-loading-bar.

I'm about to have a go at implementing this feature myself because I need it. Once I have a workable solution I'll post it here. I'm inclined to think it should be integrated into the library itself though - it's surely something many users of this library will need.

from ngx-loading-bar.

My solution:

TS:
import { LoadingBarService } from '@ngx-loading-bar/core';
export class AppComponent {
  constructor(public readonly loader: LoadingBarService) {}
}

HTML:
<div *ngIf="(loader.progress$|async) as progress" class="overlay"></div>

CSS:
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  opacity: 0;
  z-index: 2147483647;
}

Works a treat.

from ngx-loading-bar.