Skip to content

Lightweight progress spinner module for Angular, built using Angular Material. 💫

License

Notifications You must be signed in to change notification settings

iffa/ngx-material-spinner

 
 

Repository files navigation

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.

About

Lightweight progress spinner module for Angular, built using Angular Material. 💫

Topics

Resources

License

Stars

Watchers

Forks

Languages

  • TypeScript 66.6%
  • HTML 15.8%
  • SCSS 9.2%
  • JavaScript 7.3%
  • CSS 1.1%