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.
You can see the full documentation with examples.
Installing
$ npm install --save ngx-loader-indicatorQuickstart
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
},
}),
]
(...)
})