ngx-loader-bar
v1.0.2
Published
A simple loader bar component
Downloads
11
Maintainers
Readme
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'
|