Aurelia custom attribute to add awesome spinners based on http://tobiasahlin.com/spinkit/

demo https://ne0guille-aurelia-spinner.azurewebsites.net/

Installation

npm install aurelia-spinner --save

Plugin Setup The only required attribute its the spinner view.

import { SpinnerConfig, spinnerViews } from 'aurelia-spinner';

const spinnerConfig: SpinnerConfig = {
    spinner: spinnerViews.circle,
    useBackgroundOverlay: false,
    blockerClass: 'my-default-overlay-background',
    color: 'black'
};
 
aurelia.use.plugin(PLATFORM.moduleName('aurelia-spinner', spinnerConfig))

Configuration Options You can see all of the spinners available in the demo site.

spinnerViews = {
 chasingDots
 circle,
 cubeGrid,
 doubleBounce,
 fadingCircle,
 foldingCube,
 pulse,
 rotatingPlane,
 threeBounce,
 wanderingCubes,
 wave
}

add style in webpack if you use te spinner-block class you need to add this file.

'aurelia-spinner/dist/styles.css'

css: 'spinkit/css/spinkit.css;
sass: 'spinkit/scss/spinkit.scss;

or you can import a single spinner file under the spinner folder.

css: 'spinkit/css/spinners/9-cube-grid.css';
sass: 'spinkit/scss/spinners/9-cube-grid.scss';

Usage Usage with default configurations

  
 <div class="container">
   <div spinner="show.bind: showVM"></div>
 </div>

 <div spinner="show.bind: showVM; view.bind: viewVM; block: true">
 </div>
 
 Currently, you need to wrap your custom element or code.
 You can specify the container element adding the spinner-container class first the children node. Also you can add the 'aurelia-spinner' class on the parent node to render the spinner component on top of your code.

 The background overlay class will be added on the container / wrapper node.

 <section spinner="show.bind: showVM">  
   <!-- spinner will be inserted here -->    
   <div class="spinner-container">  <!-- wrapper div -->  <!-- background ovelay will be added here -->
     <!-- my-custom-code -->
   </div>
 </section>

 <section class="aurelia-spinner">
 <!-- spinner will be inserted here -->     
   <div spinner="show.bind: showVM"> <!-- wrapper div -->  <!-- background ovelay will be added here -->   
   <!-- my-custom-code -->
   </div>
 </section>

 <section>
   <div spinner="show.bind: showVM" class="playground__spinner"> <!-- spinner-container class will be added here --> 
     <!-- spinner will be inserted here -->    
     stuff
   </div>
 </section>

Bindables

  Bindable used to show or hide the spinner.
  show: boolean = false; 

  Just if you want to override the previous configured view.
  view: string = undefined;

  Used to display an overlay blocker with the spinner. You can change the style setting the class in the default configurarion object or overriding the css of the spinner-block class.
  block: boolean = false; 

  Type a color name or an hexa code.
  color: string = #333;

  example: 
  
  <div spinner="show.bind: showVM; block: true; view: viewVM; color: white"></div>

Dependencies "spinkit": https://github.com/tobiasahlin/SpinKit