@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.

Table of contents:

• Getting started
• Installation
• Implementation
• Settings Option
• Demo
• Creators
• License

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

Demo

Click Here for the demo

Creator

Tonmoy Nandy

• @GitHub

License

The MIT License (MIT)

Keywords

angular ng ngx loader spinner ngx-loader ngx-spinner ng-loader ng-spinner page-loader page-spinner