ngx-material-spinner

![Angular version required](https://img.shields.io/badge/@angular/core-^12.0.0-blue.svg?style=flat-square) ![Angular Material version required](https://img.shields.io/badge/@angular/material-^12.0.0-blue.svg?style=flat-square) ![License](https://img.shiel

Usage no npm install needed!

<script type="module">
  import ngxMaterialSpinner from 'https://cdn.skypack.dev/ngx-material-spinner';
</script>

README

Angular version required Angular Material version required License Dependency Status Code coverage npm bundle size npm spectator

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.