New Twiddle

components.timezone-clock.js

import Ember from 'ember';

export default Ember.Component.extend({
  didReceiveAttrs(){
  	  var date = new Date;
      var seconds = date.getSeconds();
      var minutes = date.getMinutes();
      var hours = date.getHours();
 			this.setProperties({hours, minutes, seconds})   
  },
  secondsStyle: Ember.computed('seconds', function() {
    return `transform: rotateZ(180deg)`;
  }),
  minutesStyle: Ember.computed('minutes', function() {
    return `transform: rotateZ(${this.get('minutes') * 6}deg)`;
  }),
  hoursStyle: Ember.computed('hours', 'minutes', function() {
    return `transform: rotateZ(${(this.get('hours') * 30) + (this.get('minutes') / 2)}deg)`;
  })
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

.clock {
  border-radius: 50%;
  background: #fff url(https://cssanimation.rocks/images/posts/clocks/ios_clock.svg) no-repeat center;
  position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-size: 90%;
  	border: solid 1px black;
}

.clock.simple:after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 6%;
  z-index: 10;
}

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours {
  background: #000;
  height: 25%;
  left: 48.75%;
  position: absolute;
  top: 25%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

.minutes {
  background: #000;
  height: 35%;
  left: 49%;
  position: absolute;
  top: 15%;
  transform-origin: 50% 100%;
  width: 2%;
}

.seconds {
  background: red;
  height: 30%;
  left: 49.5%;
  position: absolute;
  top: 24%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index: 8;
}

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

.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite linear;
}
.seconds-container {
  animation: rotate 60s infinite linear;
}

.minutes-container {
  animation: rotate 3600s infinite steps(60);
}

.seconds-container {
  animation: rotate 60s infinite steps(60);
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<div class="demo-container">{{timezone-clock}}</div>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.timezone-clock.hbs

<article class="clock simple">
  <div class="hours-container">
    <div class="hours" style={{hoursStyle}}></div>
  </div>
  <div class="minutes-container">
    <div class="minutes" style={{minutesStyle}}></div>
  </div>
  <div class="seconds-container">
    <div class="seconds" style={{secondsStyle}}></div>
  </div>
</article>

twiddle.json

{
  "version": "0.15.0",
  "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.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}