Needful Program Management

    ember-cli-spinner

    0.0.9 • Public • Published

    ember-cli-spinner

    NPM Downloads

    Visit project page and demo

    ember-cli-spinner displays css3 driven ajax spinner for your ambitious Ember.js app.

    Usage

    1. Add {{ember-cli-spinner id="uniq-123"}} to one of your templates, usually in application.hbs or View or Components
    2. Specify id attribute to uniquely identify spinner wrapper.
    3. Inject the spinner service
    4. Show, Hide & Set Animation Type for the spinner
    5. For components or child view spinner loading ensure parent position is set to relative

    Examples

    import {
      Component,
      inject
    } from 'ember';
    export default Component.extend({
      spinner: inject.service('spinner'),
      actions: {
        showSpinnerWithTimeout() {
          this.get('spinner').show('id', { //Provide the unique id
            timeout: 3000
          });
        },
        showSpinner() {
          this.get('spinner').show('id');
        },
        hideSpinner() {
          this.get('spinner').hide('id');
        }
      }
    });
    {{ember-cli-spinner id="123" type="wave" height="40px" width="40px" bgColor="transparent" color="dark-red"}}

    ...and you can change animation programmatically:

    spinner.setAnimation('123', 'pulse');

    Animation types available:

    • Pulse -> (pulse)
    • Circles -> (circles)
    • Fading Circles -> (fading-circle)
    • Wave -> (wave)
    • Double Bounce -> (double-bounce)
    • Rotating Plane -> (rotating-plane)
    • Folding Cube -> (folding-cube)
    • Wandering Cubes - (wandering-cubes)
    • Chasing Dots - (chasing-dots)
    • Three Bounce - (three-bounce)
    • Three Bounce Horizontal - (three-bounce-horizontal)
    • Cube Grid - (cube-grid)

    API's

    1. show(id, options) //provide unique id for spinner wrapper
    2. hide(id) //provide unique id for spinner wrapper
    3. setAnimation(id, type) //type from available types
    4. setHeight(id, height) //height in px or em
    5. setWidth(id, width) //width in px or em
    6. setColor(id, color) //colors from available colors
    7. setBgColor(id, color) //color can be hex or rgba value

    Spinner color class available are:

    • White -> (white) //default
    • Black -> (black)
    • Light Green -> (light-green)
    • Green -> (green)
    • Dark Green -> (dark-green)
    • Magenta -> (magenta)
    • Purple -> (purple)
    • Dark Purple - (dark-purple)
    • Darken - (darken)
    • Light Blue - (light-blue)
    • Blue - (blue)
    • Dark Blue - (dark-blue)
    • Yellow - (yellow)
    • Orange - (orange)
    • Dark Orange - (dark-orange)
    • Red - (red)
    • Dark Red - (dark-red)

    Installation

    This module is an ember-cli addon, so installation is easy as cake.

    npm install ember-cli-spinner --save-dev

    Browser Compatibility

    IE9 +, Chrome 21+, Mozilla, Safari

    Install

    npm i ember-cli-spinner

    DownloadsWeekly Downloads

    112

    Version

    0.0.9

    License

    MIT

    Last publish

    Collaborators

    • ajainvivek