ngk-loading
v1.0.5
Published
<p align="center"> <a href="https://jackopham.github.io/" target="blank"><img src="https://jackopham.github.io/content/image/logo.png" width="320" alt="Nest Logo" /></a> </p>
Downloads
40
Maintainers
Readme
ngk-loading
A loading spinner for Angular applications
Installation
Install ngk-loading via NPM, using the command below.
NPM
npm install --save ngk-loading
Getting started
Import the NgkLoadingModule
in your root application module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CoreModule } from './core/core.module';
import { NgkLoadingModule } from 'ngk-loading';
@NgModule({
//...
imports: [
//...
NgkLoadingModule.forRoot({})
],
//...
})
export class AppModule { }
// global loading...
<ngk-loading></ngk-loading>
<div class="your-container">
<div #loadingContainer></div>
//...
</div>
<div #templatecustome>
<span style="color: red">Loading...</span>
</div>
import { LoadingService, ngkLoadingAnimationTypes } from 'ngk-loading';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
title = 'ngk-loading';
@ViewChild('loadingContainer') loadingContainer: ElementRef;
@ViewChild('templatecustome') templatecustome: ElementRef;
ngkLoadingAnimationTypes = ngkLoadingAnimationTypes;
constructor(private loadingService: LoadingService) {}
ngOnInit(): void {
//loading with container and template
this.loadingService.showContainer(this.loadingContainer, this.templatecustome, { fullScreenBackdrop: false, backDrop: true });
// or
this.loadingService.showContainer(this.loadingContainer, '<p>Loading....</p>', { fullScreenBackdrop: false, backDrop: true });
// loading global
this.loadingService.show();
}
hide() {
// hide global
this.hide();
// hide in the container
this.loadingService.hide(this.loadingContainer);
}
}
Set global config
@NgModule({
//...
imports: [
//...
NgkLoadingModule.forRoot({
animationType: ngkLoadingAnimationTypes.wanderingCubes,
backdropBackgroundColour: 'rgba(0,0,0,0.1)',
backdropBorderRadius: '4px',
primaryColour: '#ffffff',
secondaryColour: '#ffffff',
tertiaryColour: '#ffffff'
})
],
//...
})
export class AppModule { }