Angular-dynamic-loader NPM

A Library With multiple Loaders for Angular6,7,8,9

Features

Angular 9 support
Multiple Loaders
Loader Position Dynamic(User Specific)
Full screen mode (Enable/Disable)

Demo

Check out the interactive demo on StackBlitz

Installation

Use the npm to install dynamic-loader.

npm install angular-dynamic-loader

Use the --save to add dynamic-loader dependency in package.json

npm install angular-dynamic-loader --save

Usage

Import DynamicLoaderModule in in the root module(AppModule):

import { BrowserModule } from '@angular/platform-browser';
// Import library module
import { DynamicLoaderModule } from 'angular-dynamic-loader';

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    //...
    DynamicLoaderModule
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

Add DynamicLoaderService service wherever you want to use the dynamic-loader.

import { Component, OnInit } from '@angular/core';
import { DynamicLoaderService } from 'angular-dynamic-loader';

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

  constructor(private loader: DynamicLoaderService) { }

  ngOnInit() {
    /** spinner starts on init */
    this.loader.show();

    setTimeout(() => {
      /** spinner ends after 5 seconds */
      this.loader.hide();
    }, 5000);
  }
}

Now use in your template

<dynamic-loader></dynamic-loader>

Methods

DynamicLoaderService.show() Shows the loader
DynamicLoaderService.hide() Hides the loader

Avaliable Options

loaderType - Set loader type rectangle-flip or circular-effect,default circular-effect
isFullScreen - Set true or false, To enable/disable overlay
top- Set in % or px to set top of loader ,default 50%
left- Set in % or px to set left of loader ,default 50%
right- Set in % or px to set right of loader ,default 50%
bottom- Set in % or px to set bottom of loader ,default 50%

Using Loader Type And Loader Postion

<dynamic-loader loaderType="rectangle-flip" top="20%" left="30%">
</dynamic-loader>

Note

Set isFullScreen option false to show loader for specific div or span
Remove isFullScreen option to show loader for full screen,default is true
Loader default position is center,You can change position by specifying top,left,right,bottom