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

Creator

Brahmi jadhav

Ask Me

You can directly send me a message on LinkedIn for any query/suggestion/updates

Credits

Thanks Vinay Jadhav for helping me with new ideas and support

License

dynamic-loader