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 { }