<time>
<div class="clock">
<div class="dial-container dial-container--hh js-clock" data-cur="9" data-start="0" data-end="12" data-dur="hh"></div>
<div class="dial-container dial-container--mm js-clock" data-cur="2" data-start="0" data-end="5" data-dur="mm"></div><div class="dial-container dial-container--m js-clock" data-cur="3" data-start="0" data-end="9" data-dur="m"></div>
<div class="dial-container dial-container--ss js-clock" data-cur="4" data-start="0" data-end="5" data-dur="ss"></div><div class="dial-container dial-container--s js-clock" data-cur="8" data-start="0" data-end="9" data-dur="s"></div>
</div>
</time>$dial-x = 65px
$dial-y = 50px
$dial-bg = #462c2e
$dial-color = #fff
$dial-font-x = 55px
body, html
height: 100%
width: 100%
margin: 0
padding: 0
background: #f65041
font-family: Lato, arial
*
box-sizing: border-box
.transitions-off *
transition: none !important
time
position: absolute
top: 150px
left: 0
right: 0
margin: 0
display: block
text-align: center
.dial-container
display: inline-block
position: relative
text-align: center
margin: auto
perspective: 1000
height: $dial-y * 2
width: $dial-x
cursor: default
&.dial-container--hh
width: $dial-font-x + $dial-x
span
width: $dial-x
height: $dial-y
.dial
top: 0
height: ($dial-y / 2)
/* overflow: hidden */
transition: all 0.6s
transform-style: preserve-3d
position: absolute
z-index: 3
transform-origin: 50px $dial-y
span
display: block
backface-visibility: hidden
position: absolute
top: 0
left: 0
height: $dial-y
overflow: hidden
background: $dial-bg
color: $dial-color
text-align: center
line-height: ($dial-y * 2)
font-size: 80px
font-weight: bold
border-radius: 10px 10px 0 0
.dial-container--ss &,
.dial-container--mm &
text-align: right
padding-right: 2px
border-radius: 10px 0 0 0
.dial-container--hh &
text-align: center
min-width: ($dial-x + $dial-font-x)
.dial-container--s &,
.dial-container--m &
text-align: left
padding-left: 2px
border-radius: 0 10px 0 0
span:first-child
z-index: 2
transform: rotateY(0deg)
background-color: darken($dial-bg, 15%)
color: darken($dial-color, 20%)
&:after
display: block
width: 100%
height: 1px
background: rgba(0,0,0,0.2)
content: ' '
position: absolute
bottom: 0
left: 0
span:last-child
transform: rotateY(180deg)
border-radius: 0 0 10px 10px
line-height: 0
transform rotateX(180deg)
.dial-container--ss &,
.dial-container--mm &
border-radius: 0 0 0 10px
.dial-container--s &,
.dial-container--m &
border-radius: 0 0 10px 0
.dial--static, .dial--next
transform: rotateX(0deg) !important
.dial--flipped
z-index: 2
transform: rotateX(180deg) !important
.dial--next
z-index: 2
.dial--later
z-index: 1
nthDigit = (int, nth) ->
parseInt(int.toString().substr(nth,1))
setAttributes = ->
timeNow = new Date()
# Set hours
hours = timeNow.getHours()
if hours > 12 then hours -= 12
$('.js-clock[data-dur="hh"]').attr('data-cur', (hours + 1))
minutes = timeNow.getMinutes()
if minutes < 10
$('.js-clock[data-dur="mm"]').attr('data-cur', 1)
$('.js-clock[data-dur="m"]').attr('data-cur', (minutes + 1))
else
$('.js-clock[data-dur="mm"]').attr('data-cur', (nthDigit(minutes, 0) + 1))
$('.js-clock[data-dur="m"]').attr('data-cur', (nthDigit(minutes, 1) + 1))
seconds = timeNow.getSeconds()
minutes = timeNow.getMinutes()
if seconds < 10
$('.js-clock[data-dur="ss"]').attr('data-cur', (1))
$('.js-clock[data-dur="s"]').attr('data-cur', (seconds + 1))
else
$('.js-clock[data-dur="ss"]').attr('data-cur', (nthDigit(seconds, 0) + 1))
$('.js-clock[data-dur="s"]').attr('data-cur', (nthDigit(seconds, 1) + 1))
tick = ($el) ->
$active = $el.find('.dial--active')
$active.removeClass('dial--active')
$active.addClass('dial--flipped')
$active.next().removeClass('dial--next').addClass('dial--active')
$active.next().next().addClass('dial--next').removeClass('dial--later')
if $active.next().hasClass 'dial--last'
setTimeout ( ->
reset($el)), 300, $el
enableTransitions = ($el) ->
$el.removeClass('transitions-off')
reset = ($el) ->
$el.addClass 'transitions-off'
$el.children().removeClass 'dial--flipped'
$el.children().removeClass 'dial--active'
$el.children().removeClass 'dial--next'
$el.children().first().addClass 'dial--active'
$el.children(':nth-child(2)').addClass 'dial--next'
$el.children(':nth-child(n+3)').addClass 'dial--later'
setTimeout ( ->
enableTransitions($el)), 300, $el
tick($el)
if $el.attr('data-dur') is 's'
$(document).trigger('10s')
if $el.attr('data-dur') is 'ss'
$(document).trigger('60s')
if $el.attr('data-dur') is 'm'
$(document).trigger('10m')
if $el.attr('data-dur') is 'mm'
$(document).trigger('60m')
setClasses = ($el) ->
curIndex = parseInt $el.attr('data-cur')
$el.children(':nth-child(' + curIndex + ')').addClass('dial--active')
$el.children(':nth-child(' + (curIndex + 1) + ')').addClass('dial--next')
$el.children(':lt(' + curIndex + ')').addClass('dial--flipped')
$el.children(':gt(' + (curIndex) + ')').addClass('dial--later')
tick($el)
startClock = ->
setInterval( ->
tick($('.js-clock[data-dur="s"]'))
, 1000)
appendEls = ->
$('.js-clock').each ->
$el = $(this)
start = parseInt $(this).attr('data-start')
end = parseInt $(this).attr('data-end')
k = start
while k <= end
if (k + 1) > end then l = 0 else l = (k + 1)
$el.append('<div class="dial"><span>' + k + '</span><span>' + l + '</span>')
k++
$el.prepend('<div class="dial"><span>0</span><span>0</span></div>')
$el.append('<div class="dial dial--last"><span>0</span><span>0</span></div>')
setClasses($el)
attachEvents = ->
$('.js-clock').on 'click', (e) ->
e.preventDefault()
$el = $(this)
$active = $el.find('.dial--active')
tick($el)
$(document).on '10s', ->
tick($('.js-clock[data-dur="ss"]'))
$(document).on '60s', ->
tick($('.js-clock[data-dur="m"]'))
$(document).on '10m', ->
tick($('.js-clock[data-dur="mm"]'))
$(document).on '60m', ->
tick($('.js-clock[data-dur="hh"]'))
$(document).ready ->
setAttributes()
appendEls()
attachEvents()
startClock()
External CSS
This Pen doesn't use any external CSS resources.