@binssoft/ngx-loader NPM

@binssoft/ngx-loader

An angular plugin to create page loader for every http request in your angular application.

Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.

Getting started

Installation

npm install @binssoft/ngx-loader --save

Implementation

import "NgxLoaderModule" in your application module. For example: app.module.ts

import {NgxLoaderModule} from '@binssoft/ngx-loader';
@NgModule({
    imports :[
	    NgxLoaderModule
	    ...
    ]
})
export class AppModule { }

add configration in your root component. For example : app.component.ts

export  class  AppComponent {
    loaderConfig:any ={
        theme:{
          back:'rgb(181 24 51 / 0.5)',
          spinner:'#184db5'
        },
        type:'ring', //bar, ring, bubble-spinner, square, bounce,cube
    }
}

HTML

Add below html just before the of app.component

<ngx-bins-loader [config]="loaderConfig"></ngx-bins-loader>

If user want to create custom html as page loader, just add html under ngx-bins-loader tag. For example:

<ngx-bins-loader>
    <div class="loader">
	    <span>Loading...</span>
	</div>
</ngx-bins-loader>

Escape page loader for specific URL(s)

If you want to skip loader for some specific url rendering, you have to add those url within skipMap function of NgxLoaderService

import {NgxLoaderService} from '@binssoft/ngx-loader'
import { HttpClient } from '@angular/common/http';
export  class  AppComponent {
    loaderConfig:any ={
        theme:{
          back:'rgb(181 24 51 / 0.5)',
          spinner:'#184db5'
        },
        type:'ring', //bar, ring, bubble-spinner, square, bounce,cube
    }
    constructor(private loaderService: NgxLoaderService,  private http : HttpClient){
            this.loaderService.skipMap([
              'albums'
            ]);
            this.http.get('https://example.com/comments').subscribe((res:any)=>{})
            this.http.get('https://example.com/albums').subscribe((res:any)=>{})
    }
}

Settings Option

Name	Description	Default Value	Example	Mandatory
`type`	different type loaders	NULL	`'type':'bar/ring/bubble-spinner/square/bounce/cube'`	YES
`theme`	to change the color code of the loader	NULL	`'theme':'#f90c92'` (only for `'type':'bar'`) `'theme':{ 'back':'#d32f2f', 'spinner':'#184db5'}`	NO