ngx-loader-bar v1.0.2

Angular loader bar Component

This library was generated with Angular CLI version 9.0.7.

This package helps to show a loader bar in the top of screen.

Installation

Use this following command to install:

npm i ngx-loader-bar

Usage

You have to import, export BrowserAnimationsModule and NgxLoaderBarModule to your SharedModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxLoaderBarModule} from 'ngx-loader-bar';
 
@NgModule({
  declarations: [],
  imports: [
    BrowserAnimationsModule,
    NgxLoaderBarModule
    ],
  exports: [
    BrowserAnimationsModule,
    NgxLoaderBarModule
  ]
})
export class SharedModule {}

Using

Html:

# default: color: dodgerblue, height: 5px
<ngx-loader-bar [isloaded]="isLoaded"></ngx-loader-bar>

# you can show color and height of the bar
<ngx-loader-bar [isloaded]="isLoaded" [config]="{color: 'red', height: '3px'}"></ngx-loader-bar>

Ts file of component:

ngOnInit() {
    this.isLoaded = false;
    // The loader bar will be disappeared after 2s
    setTimeOut(()=>{
        this.isLoaded = true;
    }, 2000);
}

API

Config attributes: | Cases |Value| Are | |----------------------------|-----|:-------------:| | 'isLoaded'|boolean | Loader bar stop when this attribute is true. Default: false | | 'color' |string| Color of the loader bar: {color: '#cdcdcd'}. Default: 'dodgerblue' | | 'height' |string| Height of the loader bar: {height: '2em'}. Default: '5px'|