Add easily an overlay loader over any kind of component. Fully customizable with your own components.

Compatibility with Angular Versions

Features

• 🔥 Works with Angular & HTML elements
• ⏳ Easy to install
• 🛠 Customizable
• ☕ Easy to use

Prerequisite

If not already done you should setup Angular CDK as mention here.

Install the dependency with

npm i @angular/cdk

Then add the following snippet in your global style.scss

@import '@angular/cdk/overlay-prebuilt.css';

Installation

Install it through npm with :

npm i ngx-load

Configuration

Using default loader

import { NgxLoadModule } from "ngx-load";

@NgModule({
  imports: [NgxLoadModule]
})
class AppModule {}

Using custom loader

import { NgxLoadModule } from "ngx-load";

@NgModule({
  imports: [
    NgxLoadModule.with({
      loaderComponent: YourLoaderComponent
    })
  ]
})
class AppModule {}

Usage

LoaderService

@Component({
  selector: 'example',
  template: `
        <div class="element"> {{ content | async }} </div>
    `,
  styles: [
    `
            .element {
                width: 100px;
                height: 100px;
            }
        `
  ]
})
export class ExampleComponent {
  content = timer(1000)
    .pipe(map(() => "Hello World"))
    .pipe(this.loaderService.attachLoader())

  constructor(public loaderService: LoaderService) {
  }
}

OverlayLoaderDirective

@Component({
  selector: 'example',
  template: `
        <div [loadOverlayLoader]="content" class="element"> {{ content | async }} </div>
    `,
  styles: [
    `
            .element {
                width: 100px;
                height: 100px;
            }
        `
  ]
})
export class ExampleComponent {
  content = timer(1000).pipe(map(() => "Hello World"))
}

ReplacementLoaderDirective

TODO: make example

Credits

• Readme inspired from @ngneat/hot-toast
• @etiennecrb for the ElementRuler taken from this thread
• loading.io for the default loader