Ngx-material-spinner NPM

Lightweight spinner module for Angular, built using Angular Material.

Installation

Using npm:

$ npm install ngx-material-spinner --save

Using yarn:

$ yarn add ngx-material-spinner

Using Angular CLI:

$ ng add ngx-material-spinner

Usage

Import NgxMaterialSpinnerModule in the root module of the application:

import { NgModule } from '@angular/core';
import { NgxMaterialSpinnerModule } from 'ngx-material-spinner';

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

Add ngx-material-spinner to component template:

<ngx-material-spinner><p>You can include custom content (i.e. loading text)</p></ngx-material-spinner>

Inject NgxMaterialSpinnerService and access spinner functionality:

import { NgxMaterialSpinnerModule } from 'ngx-material-spinner';

export class AppComponent implements OnInit {
  constructor(private spinner: NgxMaterialSpinnerModule) {}

  ngOnInit() {
    this.spinner.show('primary');

    // hide spinner after 5000ms
    this.spinner.hide('primary', 5000);
  }
}

Options

Now, you can pass below config options to change inspector behavior in the .forRoot() method. All the options are optional.:

Option	Type	Description
backgroundColor	`string`	Change overlay background colorDefault value: `rgba(51, 51, 51, 0.8)`
color	`ThemePalette`	Set the spinner color, available options are Angular Material provided `primary`/`accent`/`warn`.Default value: `primary`
fullScreen	`boolean`	If set to true, uses full screen CSS styling.Default value: `true`
name	`string`	Change the name of this spinner instance. Allows having multiple separate spinners in the application.Default value: `primary`
zIndex	`number`	Sets the overlay's z-index value. Change this if the overlay doesn't behave like an overlay (elements over it).Default value: `99999`
strokeWidth	`number`	Set the stroke width of the progress spinner.Default value: `8`
diameter	`number`	Set the diameter of the progress spinner.Default value: `96`
animated	`boolean`	Enables or disables overlay fade animations.Default value: `true`