Ember-spinner-button NPM

Ember-spinner-button

Simple Ember spinner button component using spin.js.

Demo

Demo available here.

Installation

ember install ember-spinner-button

Usage

Example:

{{#spinner-button onclick=(action "saveForm") isSpinning=isSaving}}
  Save
{{/spinner-button}}

The following properties should be set:

isSpinning: a boolean value indicating whether or not the button is currently spinning.
onclick: the action that will be called when the button is clicked while not currently spinning.

The following properties can be set to customize the button:

disabled (default: false): boolean value or function that specifies the disabled attribute.
title (default: null): string or function that resolves to the title attribute.

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

lines (default: 8): the number of lines to draw.
length (default: 4): the length of each line.
width (default: 3): the line thickness.
radius (default: 5): 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 change the defaults for all spinner buttons in your application, extend the component with your own defaults:

// app/components/spinner-button.js
import SpinnerButtonComponent from 'ember-spinner-button/components/spinner-button';

export default SpinnerButtonComponent.extend({
  length: 6,

  width: 2
});