Playing around with an accelerating spinner

controllers.application.js

import Ember from 'ember';

var pfx = ["webkit", "moz", "MS", "o", ""];


export default Ember.Controller.extend({
  appName: 'spinner demo',
  isLoading: true,
  speed: null,
  startEngine: false,
  rotates: Ember.$('#rays'),
  prevent: false,
  /*
  PrefixedEvent: function(element, type, callback) {
    console.log('inside prefixedevent');
    console.log(callback(element));
    for (var p = 0; p < pfx.length; p++) {
      if (!pfx[p]) type = type.toLowerCase();
      //return(pfx[p]+'-'+type);
      //console.log(element);
      element.on(pfx[p]+type, function() {
        callback(element);
      });
			//      element.addEventListener(pfx[p]+type, callback, false);
    }
  },
  
  Sleep: function(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
      if ((new Date().getTime() - start) > milliseconds){
        break;
      }
    }
	},
  
  ChangeSpeed: function() {
    console.log('inside ChangeSpeed');
    let _this = this;
    this.PrefixedEvent(_this.get('rotates'), "animation", function() {
      let _anim = 'rayspin ' + _this.get('speed') + 's infinite infinity alternate';
      let el = _this.get('rotates');
      el.removeClass('rays-idle');
      el.addClass('rays');
      /*
							if (!_this.get('prevent')) {
                var el = _this.get('rotates'),  
                   newOne = el.clone(true)
                            .css({'animation':_anim});
                el.before(newOne);
                console.log(el);
                console.log(el.attr('class'));
                console.log(newOne);
                Ember.$("." + el.attr("class") + ":last").remove();
                _this.set('rotates',Ember.$('#rays'));
                _this.set('prevent',true);
              }
            else {
                _this.set('prevent',false);
                var el = _this.get('rotates'),
                   newOne = el.clone(true)
                            .css({'animation':_anim});
                el.before(newOne);
                console.log(el);
	              console.log(el.attr('class'));                
                console.log(newOne);
                Ember.$("." + el.attr("class") + ":last").remove();
                _this.set('rotates',Ember.$('#rays'));
            }
        });
  }.observes('speed'),
  */

  //animation: test 1s 2s 3 alternate backwards
  newRunup: function() {    
    let _this = this;
    console.log('spinning up the turbine');
    /* for(var i = 10; i > 0; i --) { */
      //let _anim = 'rayspin 5s infinite infinite';
    //console.log(_anim);
      let el = Ember.$('#rays');
    	console.log(el.attr("style"));
      el.removeClass('rays-idle');
    	console.log(el.attr("style"));
      //el.css({'animation':_anim});
    	//console.log(el.attr("style"));
      //console.log(_this.get('rotates').attr("css");
		/*	_this.Sleep(1500);
    } */
  }.observes('startEngine'),
  
  actions: {
    runDemo: function() {
      let _this = this;
      //_this.set('isLoading',true);
  		return new Ember.RSVP.Promise(function(resolve) {
        console.log('hooking up the airstart');
				_this.set('startEngine',true);
         
        setTimeout(function() {
          console.log('Timeout!');
          _this.set('startEngine',false);
        }, 60000);
    	});
		}
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({  
});

styles.app.css

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

@-webkit-keyframes rayspin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rayspin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-ms-keyframes rayspin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(359deg);
  }
}

#raysDemoHolder	{ 
  position: relative; 
  width: 490px; 
  height: 490px; 
  margin: 100px 0 0 200px; 
}
#raysLogo { 
  width: 300px; 
  height: 233px; 
  text-indent: -3000px; 
  background: url(https://davidwalsh.name/wp-content/themes/2k11/images/homeLogo.png) 0 0 no-repeat; 
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 2; 
}
#rays	{ 
  background: url(https://davidwalsh.name/wp-content/themes/2k11/images/rays-main.png) 0 0 no-repeat; 
  position: absolute; 
  top: -100px; 
  left: -100px; 
  width: 490px; 
  height: 490px; 
}
.rays {
  -webkit-animation-name: rayspin; 
  -webkit-animation-duration: 12000ms; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: infinite;

  -moz-animation-name: rayspin; 
  -moz-animation-duration: 12000ms; 
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: infinite;

  -ms-animation-name: rayspin; 
  -ms-animation-duration: 12000ms;
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: infinite;

  /* boooo opera */
  -o-transition: rotate(3600deg); /* works */
}

.rays-idle {
  -webkit-animation-name: rayspin; 
  -webkit-animation-duration: 80000ms; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: infinite;

  -moz-animation-name: rayspin; 
  -moz-animation-duration: 80000ms; 
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: infinite;

  -ms-animation-name: rayspin; 
  -ms-animation-duration: 80000ms;
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: infinite;

  /* boooo opera */
  -o-transition: rotate(3600deg); /* works */
}

.newspin ul{
	height: 100%;
	width: 100%;
	display: block;
	margin: 0 auto;
}

.newspin li{
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	background: transparent;
	border: 10px solid rgba(23,246,251, 1.0);
	border-radius: 500px;
	transition: all 0.5s ease;
}

.newspin li:first-child{
	margin-left: -130px;
	margin-top: -130px;
	width: 240px;
	height: 240px;
	border-color: #e000c9;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: spin 12s infinite linear;
}

.newspin li:nth-child(2) {
	margin-left: -120px;
	margin-top: -120px;
	width: 220px;
	height: 220px;
	border-color: #7500ad;
	border-top-color: transparent;
	border-right-color: transparent;
	animation: spin2 12s infinite linear;
}

.newspin li:nth-child(3) {
	margin-left: -110px;
	margin-top: -110px;
	width: 200px;
	height: 200px;
	border-color: #0049d8;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: spin3 4s infinite linear;
}

.newspin li:nth-child(4) {
	margin-left: -80px;
	margin-top: -80px;
	width: 140px;
	height: 140px;
	border-color: #0089ed;
	border-left-color: transparent;
	border-top-color: transparent;
	animation: spin4 4s infinite linear;
}

.newspin li:nth-child(5) {
	margin-left: -70px;
	margin-top: -70px;
	width: 120px;
	height: 120px;
	border-color: #00f2a9;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: spin5 4s infinite linear;
}

.newspin li:nth-child(6) {
	margin-left: -60px;
	margin-top: -60px;
	width: 100px;
	height: 100px;
	border-color: #009e2c;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: spin6 4s infinite linear;
}

.newspin li:nth-child(7) {
	margin-left: -40px;
	margin-top: -40px;
	width: 60px;
	height: 60px;
	border-color: #d4d800;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	animation: spin7 2s infinite linear;
}

.newspin li:nth-child(8) {
	margin-left: -30px;
	margin-top: -30px;
	width: 40px;
	height: 40px;
	border-color: #c18b00;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: spin8 2s infinite linear;
}

/* Animations */

@keyframes spin {
	0%  {transform: rotate(0deg);}
	10%  {transform: rotate(-25deg);}
	20%  {transform: rotate(47deg);}
	30%  {transform: rotate(-125deg);}
	40%  {transform: rotate(-25deg);}
	50%  {transform: rotate(25deg);}
	60%  {transform: rotate(165deg);}
	70%  {transform: rotate(42deg);}
	80%  {transform: rotate(180deg);}
	90%  {transform: rotate(-300deg);}
	100%{transform: rotate(360deg);}	
}

@keyframes spin2 {
	0%  {transform: rotate(0deg);}
	100%{transform: rotate(360deg);}	
}

@keyframes spin3 {
	0%  {transform: rotate(0deg);}
	60%  {transform: rotate(165deg);}
	70%  {transform: rotate(42deg);}
	100%{transform: rotate(360deg);}	
}

@keyframes spin4 {
	0%  {transform: rotate(0deg);}
	100%{transform: rotate(360deg);}	
}

@keyframes spin5 {
	0%  {transform: rotate(0deg);}
	10%  {transform: rotate(-25deg);}
	20%  {transform: rotate(47deg);}
	30%  {transform: rotate(-125deg);}
	100%{transform: rotate(360deg);}	
}

@keyframes spin6 {
	0%  {transform: rotate(0deg);}
	80%  {transform: rotate(180deg);}
	90%  {transform: rotate(-300deg);}
	100%{transform: rotate(360deg);}	
}

@keyframes spin7 {
	0%  {transform: rotate(0deg);}
	100%{transform: rotate(-360deg);}	
}

@keyframes spin8 {
	0%  {transform: rotate(0deg);}
	100%{transform: rotate(360deg);}	
}

templates.application.hbs

{{#if isLoading}}
	<div id="raysDemoHolder">
  <div id="rays" class="rays-idle"></div>
  </div>
  <!--<div class="newspin">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>-->
{{/if}}
<h1>Welcome to {{appName}}</h1>
<br>
<button type="button" {{action "runDemo"}}>start the engine</button>
<br>
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {   
  }
}