# aurelia-spinner

> Spinner custom attribute for aurelia applications.

Latest version **1.0.12** (published 2017-10-17) · CC0-1.0 license · 0 weekly downloads

## Install

```sh
npm install aurelia-spinner
pnpm add aurelia-spinner
yarn add aurelia-spinner
bun add aurelia-spinner
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2017-10-17 |
| First published | 2017-08-25 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | yes |
| GitHub stars | 1 |
| Author | Guillermo Eyherabide |
| Maintainers | ne0guille |
| Keywords | aurelia, plugin, spin, spinner, spinners, spinkit |

## Links

- npm: https://www.npmjs.com/package/aurelia-spinner
- Repository: https://github.com/ne0guille/aurelia-spinner
- Homepage: https://ne0guille-aurelia-spinner.azurewebsites.net/
- Issues: https://github.com/ne0guille/aurelia-spinner/issues
- npm.io page: https://npm.io/package/aurelia-spinner

## Dependencies (3)

- [spinkit](https://npm.io/package/spinkit.md) 1.2.5
- [aurelia-pal](https://npm.io/package/aurelia-pal.md) 1.3.0
- [aurelia-framework](https://npm.io/package/aurelia-framework.md) 1.1.4

## Recent versions

- 1.0.12 (latest) — 2017-10-17
- 1.0.11 — 2017-09-05
- 1.0.10 — 2017-09-04
- 1.0.9 — 2017-08-31
- 1.0.8 — 2017-08-30
- 1.0.7 — 2017-08-30
- 1.0.6 — 2017-08-28
- 1.0.5 — 2017-08-26
- 1.0.4 — 2017-08-26
- 1.0.3 — 2017-08-25
- 1.0.2 — 2017-08-25
- 1.0.1 — 2017-08-25

## README

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

---
_Source: https://npm.io/package/aurelia-spinner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._