Loading Spinner

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Loading Spinner Component'
});

application.template.hbs

<h1>{{appName}}</h1>
<br>
<br>
{{loading-spinner}}
<br>
<br>

loading-spinner.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  tagName: 'loading-spinner',
  classNameBindings: [':spinner', 'size'],
  
  size: 'small'
  
});

loading-spinner.template.hbs

{{yield}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

loading-spinner {
  display: block;
	position: relative;
  overflow: hidden;
  width:16px;
  height: 16px;
} 
loading-spinner:before {
    content: 'Loading...';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
loading-spinner:not(:required):before {
    content: '';
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, .3);
    border-top-color: rgba(0, 0, 0, .6);
    animation: spinner .6s linear infinite;
    -webkit-animation: spinner .6s linear infinite;
}
@keyframes spinner {
    to {transform: rotate(360deg);}
}
@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);}
}

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}