Showing posts with label ng-spin-kit. Show all posts
Showing posts with label ng-spin-kit. Show all posts


October 20, 2017
SpinKit ( spinners for Angular 2+
Inspired by angular-spinkit (


  1. Install with NPM:
     npm install ng-spin-kit --save 
  2. Import one component
     import { NgSpinKitModule } from 'ng-spin-kit'  
  3. Use it:
     // app.component.ts  
     import { Component } from '@angular/core';  
      selector: 'app',  
      template: `  
     export class AppComponent {}  
     // app.module.ts  
     import { NgModule } from 'angular2/core';  
     import { BrowserModule } from '@angular/platform-browser';  
     import { AppComponent } from './app.component';  
     import { NgSpinKitModule } from 'ng-spin-kit';  
      imports: [  
      declarations: [  
      bootstrap: [  

For every component you can set:
 [isRunning]: boolean - state of the spinner, true - visible, false - hidden, default: true  

 [delay]: number - representing the milliseconds to wait, before showing the spinner, default: 0  

 [color]: string - background color for each item  
You can generate JavaScript code based on TypeScript by:
 npm run tsc  
To regenerate typings:
 npm run typings  
To compile and run demo app in browser:
 npm start  

Note: Special thanks to Wolters Kluwer
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.