1.0.0 • Published 3 years ago
ember-spinner v1.0.0
ember-spinner
A simple Ember CLI Spinner with up-to-date dependencies. Cloned from ember-cli-spinner (https://github.com/ajainvivek/ember-cli-spinner).
Installation
ember install ember-spinner
(Is the easyed way...)yarn install ember-spinner
(alternative way)
Usage
- Add
{{ember-spinner id="uniq-123"}}
to one of your templates, usually inapplication.hbs
or View or Components - Specify
id
attribute to uniquely identify spinner wrapper. - Inject the
spinner
service - Show, Hide & Set Animation Type for the spinner
- For components or child view spinner loading ensure parent position is set to
relative
Example
{{ember-spinner id="demo-spinner" type="wave" height="40px" width="40px" bgColor="transparent" color="dark-red"}}
import {Component, inject} from 'ember';
export default Component.extend({
spinner: inject.service('spinner'),
actions: {
showSpinnerWithTimeout() {
this.get('spinner').show('demo-spinner', { //Provide the unique id
timeout: 3000
});
},
showSpinner() {
this.get('spinner').show('demo-spinner');
},
hideSpinner() {
this.get('spinner').hide('demo-spinner');
}
}
});
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)
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)
API's
- show(id, options) //provide unique id for spinner wrapper
- hide(id) //provide unique id for spinner wrapper
- setAnimation(id, type) //type from available types
- setHeight(id, height) //height in px or em
- setWidth(id, width) //width in px or em
- setColor(id, color) //colors from available colors
- setBgColor(id, color) //color can be hex or rgba value