New Twiddle

components.my-spinner.js

import Component from 'sparkles-component';


export default class AppaloosaSpinner extends Component {

  get smallSpinner() {
    if (this.args.small === "true") {
      return 'spinner--small';
    } else {
      return '';
    }
  }

  // @computed('styleNamespace', 'inline')
  get inlineSpinner() {
    if (this.args.inline === "true") {
      return `spinner--inline`;
    } else {
      return '';
    }
  }
  // @computed('styleNamespace', 'white')
  get whiteSpinner() {
    if (this.args.white === "true") {
      return `spinner--white`;
    } else {
      return '';
    }
  }
};

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

{{my-spinner}}

templates.components.my-spinner.hbs

<div class="spinner {{this.inlineSpinner}} {{this.whiteSpinner}} {{this.smallSpinner}}">
  <div class="spinner__container">
    <svg width="191px" height="191px" viewBox="0 0 191 191" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Arrow-loader">
          <rect id="Rectangle" x="0" y="0" width="191" height="191"></rect>
          <path d="M155.3162,120.4506 C158.0582,113.0686 159.2902,105.3746 159.0312,97.7326 L143.2302,79.8196 C147.3302,95.7866 145.0492,111.2596 137.5912,123.0886 L140.5952,142.8046 C147.0692,136.6576 152.1142,129.0706 155.3162,120.4506" id="Fill-1" fill="#FAC922"></path>
          <path d="M148.8375,150.9084 L174.7765,138.9724 C185.0835,119.5534 190.3215,96.0734 182.1215,74.5204 L172.1035,98.7524 C173.1155,118.6544 164.3745,137.9994 148.8375,150.9084" id="Fill-3" fill="#FAC922"></path>
          <path d="M96.1853,173.904 C53.5913,173.904 18.9383,139.151 18.9383,96.484 C18.9383,77.439 25.9093,59.115 38.5663,44.926 L49.7593,54.9 C39.5573,66.339 33.9383,81.09 33.9383,96.449 C33.9383,130.844 61.8623,158.907 96.1853,158.907 C130.5073,158.907 158.4313,130.607 158.4313,96.607 L173.4313,96.607 C173.4313,139.607 138.7793,173.904 96.1853,173.904" id="Fill-6" fill="#00A2B6"></path>
          <path d="M15.0102,58.2405 C14.2292,56.0045 58.5012,31.6805 60.2782,33.0565 C62.0542,34.4315 49.0682,83.4365 47.3852,83.2985 C45.7012,83.1615 15.7912,60.4765 15.0102,58.2405" id="Fill-8" fill="#F3CD99"></path>
        </g>
      </g>
    </svg>
  </div>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "sparkles-component": "1.3.0"
  }
}