plus-spinner

A spinner loading for Angular 4.

Demo

Demo spinners

Installation

$ npm install --save plus-spinner

Usage

Import the PlusSpinnerModule in your module:

import { NgModule } from '@angular/core';
//...
import { PlusSpinnerModule } from "plus-spinner";

@NgModule({
  imports: [
    //...
    PlusSpinnerModule.forRoot()
  ],
})
export class AppModule { }

How to use...

import { Component, OnInit } from '@angular/core';

@Component({
    //...
})
export class PlusComponent implements OnInit {
    //...
    public isRunning: boolean = false;

    constructor(private plusService: PlusService) { }

    ngOnInit() { }

    public loadFakeData() {
        //Start showing plus-spinner
        this.isRunning = true;
        this.plusService.getFakeData()
            .subscribe(res => {
                //Hide plus-spinner
                this.isRunning = false;
                //...
            }, err => {
                //Hide plus-spinner
                this.isRunning = false;
                //...
            });
    }
}

Input parameters

| Input | Required | Details | | ---- | ---- | ---- | | isRunning | Required | Boolean, determines when will show plus-spinner. | | spinner | Optional | String, Default: bounce, Types of plus-spinner | | spinnerInBox | Optional | Boolean, Default: true plus-spinner set parent position to relative | | spinnerContainerClass | Optional | String, Css class for plus-spinner container | | spinnerClass | Optional | String, Css class for plus-spinner box | | delay | Optional | Number, Default: 0, Delay before show plus-spinner |

Types spinner

let allowSpinner = [
    'bounce',
    'plane',
    'stretch',
    'cube',
    'scaleout',
    'dot',
    'bouncedelay',
    'plus-circle',
    'cube-grid',
    'fading-circle',
    'folding-cube'
];

License

ISC © Alexander Kryhtenko