Flat Clock

Flat Clock.markdown

Flat Clock

Inspired by MomentJS's homepage clock (http://momentjs.com/).

A Pen by Joseph Shambrook on CodePen.

License.

index.html

<div class="container">
  <div class="clock">
      <div class="hour"></div>
      <div class="minute"></div>
  </div>
</div>

script.js

function clock() { 
  var t = moment(),
      a = t.minutes() * 6,
      o = t.hours() % 12 / 12 * 360 + (a / 12);
  $(".hour").css("transform", "rotate(" + o + "deg)");
  $(".minute").css("transform", "rotate(" + a + "deg)");
}
function refreshClock() {
  clock(), setTimeout(refreshClock, 1000)
}
refreshClock();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>

style.css

* {
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background-color: #e74c3c;
}

.circle(@width:15px) {
	border-radius: 100%;
	display: block;
	height: @width;
	width: @width;
}

.hands() {
	background: #fff;
	height: 0;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 0;

	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.container {
	margin: 40px auto 20px;
	width: 250px;
}

.clock {
  border: 5px solid #FFF;
  .circle(250px);
  position: relative;
    
  .hour  {
    .hands();
    margin: -60px -2px 0;
    padding: 60px 2px 0;
  }

  .minute {
    .hands();
    margin: -105px -2px 0;
    padding: 105px 2px 0;
  }
}