README
NGX Loader INDICATOR
NGX LOADER INDICATOR is the best directive without wrapping your element to additional component
You can also try our NGX MASK Download it. You can also try our NGX COPYPASTE Download it.
documentation with examples.
You can see the fullInstalling
$ npm install --save ngx-loader-indicator
Quickstart
Import ngx-loader-indicator module in Angular app.
import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'
(...)
@NgModule({
(...)
imports: [
NgxLoaderIndicatorModule.forRoot(options)
]
(...)
})
Usage
<div [loader]="isLoading">Content</div>
Examples
<form (ngSubmit)="save(form.value)" [formGroup]="form" [loader]="isLoading">
<h2>Login</h2>
<input matInput type="email" placeholder="Email" #email formControlName="email">
<input matInput type="password" placeholder="Password" #name formControlName="password">
<button mat-button [disabled]="form.invalid">Login</button>
</form>
ngx-loader-indicator Options
You can define your custom options
custom img (string) and colors
{
img: string,
imgStyles: {
width: string, // '30px'
background: string, // 'yellow' or rgb(255, 255, 0)
}
}
custom wrapper layout colors
{
loaderStyles: {
background: string,
},
}
animations options for image rotation
rotate: {
delay?: number;
direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
duration: number
easing?: string;
endDelay?: number;
fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
id?: string;
iterationStart?: number;
iterations?: number;
},
Usage
import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'
(...)
@NgModule({
(...)
imports: [
NgxLoaderIndicatorModule.forRoot({
img: 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4',
loaderStyles: {
background: 'rgba(255, 255, 255, 0.8)',
},
imgStyles: {
width: '100px',
background: 'yellow',
},
rotate: {
duration: 5000
},
}),
]
(...)
})