11.0.5 • Published 5 years ago
@vlah.io/ngx-loading v11.0.5
@vlah.io/ngx-worker
CSS loading animations for Angular.
Available Directives (code example)
The loading
directive comes in various colour options:
dark
, blue
, red
, green
, brown
, yellow
, white
and darker
.
<td vlahioLoading
[isVisible]="true|false"
[align]="left|center|right"
[color]="vlahio-dark|green|red|..."></td>
<div vlahioBouncingDots
[hideMessage]="true"
[message]="'Loading...'"
[isVisible]="true"></div>
<div vlahioSlidingDots
[hideMessage]="true"
[message]="'Loading...'"
[isVisible]="true"></div>
Page loading animation (dynamically loaded)
compRef: ComponentRef<PageLoadingWorker>;
constructor(private pageLoadingWorker: PageLoadingWorker) {
}
show(options: DisplayOptionsInterface): void {
this.compRef = this.pageLoadingWorker.display(options);
}
hide(): void {
this.pageLoadingWorker.destroy(this.compRef);
}
CSS dependencies
/* You can add global styles to this file, and also import other style files */
@import "../../ngx-loading/src/assets/css/ngx-loading.css";
@import "../../ngx-loading/src/assets/css/page-loading.css";
@import "../../ngx-loading/src/assets/css/sliding-dots.css";
@import "../../ngx-loading/src/assets/css/bouncing-dots.css";
For more details read here.