ember-spin-spinner

Ember-spin-spinner

Simple Ember spinner component based on spin.js.

Installation

npm install ember-spin-spinner --save-dev
ember generate ember-spin-spinner

Usage

Example:

<!-- somepage.hbs -->

<div class='loading-container'>
  {{spin-spinner lines=13 length=20 width=10}}
</div>

/* somepage.css */

.loading-container {
  /* The spinner is absolutely positioned (in the center by default) so set parent position to relative */
  position: relative;
}

The following properties can be set to customize a particular spinner:

• lines (default: 13): the number of lines to draw
• length (default: 20): the length of each line
• width (default: 10): the line thickness
• radius (default: 30): the radius of the inner circle
• corners (default: 1): corner roundness (0..1)
• rotate (default: 0): the rotation offset
• direction (default: 1): 1 for clockwise, -1 for counterclockwise
• color (default: parent element text color): #rgb or #rrggbb or array of colors
• speed (default: 1): rounds per second
• trail (default: 60): afterglow percentage
• shadow (default: false): whether to render a shadow
• hwaccel (default: false): whether to use hardware acceleration
• top (default: '50%'): top position relative to parent
• left (default: '50%'): left position relative to parent.

If you want to set different defaults for all spinners in your application, extend the component and override the defaults with your own:

// app/components/spin-spinner.js
import SpinSpinnerComponent from 'ember-spin-spinner/components/spin-spinner';

export default SpinSpinnerComponent.extend({
  length: 6,

  width: 2
});