@hardpool/ngx-spinner v2.2.1

@hardpool/ngx-spinner

Customizable loading spinner for Angular (version ng 5 and above). Supports multiple instances of spinners with different configurations. Can mask element, portion of UI or complete window.

Demo

Click here to see it in action!

Installation

npm i @hardpool/ngx-spinner

Usage

Import NgxSpinnerModule in your module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { NgxSpinnerModule } from '@hardpool/ngx-spinner';

@NgModule({
  // ...
  imports: [
	// ...
	NgxSpinnerModule
  ],
  // ...
})
export class AppModule { }

Add tag ngx-spinner in your component to create a spinner instance. component.html

<ngx-spinner [visible]="showSpinner" [config]="spinnerConfig"></ngx-spinner>
<button (click)="showSpinner()">Show Spinner</button>
<button (click)="hideSpinner()">Hide Spinner</button>

Control spinner instance using input parameters. component.ts

import { SPINNER_ANIMATIONS, SPINNER_PLACEMENT, ISpinnerConfig } from '@hardpool/ngx-spinner';

@Component({
  // ...
})
export class DemoComponent implements OnInit {
  showSpinner: boolean;
  spinnerConfig: ISpinnerConfig;

  constructor() { }

  ngOnInit() {
	this.spBlockUiConfig = {
		placement: SPINNER_PLACEMENT.block_ui,
		animation: SPINNER_ANIMATIONS.rotating_dots,
		size: "3rem",
		color: "#1574b3"
	};
  }
  
  showSpinner(){
    this.showSpinner = true;
  }
  
  hideSpinner(){
    this.showSpinner = false;
  }
}

Note: Config can be set globally or specific to instance. For SPINNER_PLACEMENT.block_ui parent element of <ngx-spinner></ngx-spinner> must explicitly specify position: relative.

Input Parameters

Below are the inputs for ngx-spinner.

Config Options

Below are the configuration options for spinner, type ISpinnerConfig. Config options can be set globally or can be set for each ngx-spinner instance.

Global Config

Global config affects all spinners in app. These config overrides default configs and are overriden by instance configs. To set global config use config method while including NgxSpinnerModule.

@NgModule({
  // ...
  imports: [
	// ...
	NgxSpinnerModule.config({
      size: '3.5rem',
      color: '#53f46e'
	})
  ],
  // ...
})

Instance Config

Instance config affects only the spinner instance. These config ovverrides global config. Instance config can be set by input parameter config.

API

Below are the methods exposed by NgxSpinner.

Optional: Usage (example with componentRef)

Below is alternate way of using spinner with API. component.html

<ngx-spinner #loginSpinner></ngx-spinner>

component.ts

import { NgxSpinner } from '@hardpool/ngx-spinner';

@Component({
  // ...
})
export class DemoComponent implements OnInit {
  @ViewChild("loginSpinner") loginSpinner: NgxSpinner;

  constructor() { }

  ngOnInit() {
	this.loginSpinner.config = {
		// ... spinner config ...
	};
  }
  showSpinner(){
    this.loginSpinner.show();
  }
  hideSpinner(){
    this.loginSpinner.hide();
  }
}