ecs
ember-cli-spinner
npm i ember-cli-spinner
ecs

ember-cli-spinner

AJAX Spinners for your Ember.js app

by Ajain Vivek

0.0.9 (see all)License:MITTypeScript:Not Found
npm i ember-cli-spinner
Readme

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

Downloads/wk

95

GitHub Stars

10

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

2

OPEN PRs

1
VersionTagPublished
0.0.9
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate