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 |

Credits

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

License

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