aurelia-spinner

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
`



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.

stuff

`
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:

``

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