ngx-material-spinner

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 color Default 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

Credits

• Adapted and heavily modified from ngx-spinner, created by Napster2210

License

ngx-material-spinner is licensed under the MIT license.