NGX LOADER INDICATOR is the best directive to have loader without wrapping your element to additional component
You can also try our NGX MASK check it. You can also try our NGX COPYPASTE check it.
You can try live demo with examples.
$ npm install --save ngx-loader-indicatorPay attention this version works for angular >= 14.0.0
Configure for application with provideEnvironmentNgxLoaderIndicator
bootstrapApplication(AppComponent, {
providers: [
provideAnimations(),
provideEnvironmentNgxLoaderIndicator(),
(...)
],
}).catch((err) => console.error(err));or configure for feature with provideNgxLoaderIndicator and import standalone directive NgxLoaderIndicatorDirective
@Component({
selector: 'my-feature',
templateUrl: './my-feature.component.html',
styleUrls: ['./my-feature.component.css'],
standalone: true,
imports: [NgxLoaderIndicatorDirective, (...)],
providers: [
(...)
provideNgxLoaderIndicator({
img: 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4',
loaderStyles: {
background: 'rgba(255, 255, 255, 0.8)',
},
imgStyles: {
width: '50px',
background: 'yellow',
},
rotate: {
duration: 5000,
},
}),
],
})
export class MyFeatureComponent {}Pay attention this version works for angular < 12.0.0
Import module in needed module.
import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'
(...)
@NgModule({
(...)
imports: [
NgxLoaderIndicatorModule.forRoot(options)
]
(...)
})<div [ngxLoaderIndicator]="isLoading">Content</div><form (ngSubmit)="save(form.value)" [formGroup]="form" [ngxLoaderIndicator]="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
},
}),
]
(...)
})