loading-spinner.js

/*global Spinner*/

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['dw-spin-view'],

  size: 'large',

  sizes: {
    large: {
      lines: 11,
      length: 6,
      width: 3,
      radius: 7
    },

    small: {
      lines: 10,
      length: 4,
      width: 2,
      radius: 3.5
    }
  },

  didInsertElement: function() {
    var opts = {
      lines: 11, // The number of lines to draw
      length: 6, // The length of each line
      width: 3, // The line thickness
      radius: 7, // The radius of the inner circle
      corners: 1, // Corner roundness (0..1)
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      color: '#000', // #rgb or #rrggbb
      speed: 0.8, // Rounds per second
      trail: 61, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: true, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 1000, // The z-index
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };

    var sizeOpts = this.sizes[this.get('size')];

    Ember.merge(opts, sizeOpts);

    // FIXME: Should this be destroyed?
    new Spinner(opts).spin(this.$()[0]);
  }
});

spinner.scss

.content-container {
  position: relative;

  .dw-spin-view {
    margin: 32px auto;
    height: 32px;
  }
}