Nearly Perfect Mediocracy

    ngx-material-spinner
    TypeScript icon, indicating that this package has built-in type declarations

    12.0.1 • Public • Published

    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.

    Install

    npm i ngx-material-spinner

    DownloadsWeekly Downloads

    32

    Version

    12.0.1

    License

    MIT

    Unpacked Size

    65.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • iffa