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.
$ npm install --save ngx-loader-indicator
Import ngx-loader-indicator module in Angular app.
import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'
(...)
@NgModule({
(...)
imports: [
NgxLoaderIndicatorModule.forRoot(options)
]
(...)
})
<div [loader]="isLoading">Content</div>
<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>
You can define your custom options
{
img: string,
imgStyles: {
width: string, // '30px'
background: string, // 'yellow' or rgb(255, 255, 0)
}
}
{
loaderStyles: {
background: string,
},
}
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;
},
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
},
}),
]
(...)
})