<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="timer-group">
<div class="timer hour">
<div class="hand">
<span>
</span>
</div>
</div>
<div class="timer minute">
<div class="hand">
<span>
</span>
</div>
</div>
<div class="timer second">
<div class="hand">
<span>
</span>
</div>
</div>
<div class="face">
<p id="lazy">00:23:51</p>
</div>
</div>
</body>
body {
padding: 20px;
/* background: #111; */
color: #fff;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
.timer-group {
height: 100px;
margin: 0 auto;
position: relative;
width: 100%;
}
.timer {
height: 100px;
overflow: hidden;
position: absolute;
width: 100%;
}
.timer:after {
/* background: #111; */
content: "";
display: block;
height: 100px;
left: 10px;
position: absolute;
width: 100%;
top: 10px;
}
.timer .hand {
float: left;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.timer .hand span {
width: 100%;
height: 100px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.timer .hand span {
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.timer .hand:first-child span {
animation-name: spin1;
}
.timer.hour {
background: rgba(0, 0, 0, .3);
height: 100px;
left: 0;
width: 100%;
top: 0;
}
.timer.hour .hand span {
animation-duration: 3600s;
background-color: rgba(255, 0, 255, .4);
}
.timer.hour:after {
height: auto;
left: 20px;
width: auto;
top: 20px;
}
.timer.minute {
background: rgba(0, 0, 0, .2);
height: 100px;
left: 0;
width: 100%;
top: 0;
}
.timer.minute .hand span {
animation-duration: 60s;
background-color: rgba(0, 255, 255, .4);
}
.timer.minute:after {
height: auto;
width: auto;
top: 20px;
}
.timer.second {
background: rgba(0, 0, 0, .2);
height: 100px;
left: 0;
width: 100%;
top: 0;
}
.timer.second .hand span {
animation-duration: 1s;
background-color: rgba(255, 255, 255, .15);
}
.timer.second:after {
height: 100px;
left: 0;
width: 100%;
top: 0;
}
.face {
background: rgba(0, 0, 0, .1);
height: 100px;
left: 0;
position: absolute;
width: 100%;
text-align: center;
top: 0;
}
.face h2 {
font-weight: 300;
}
.face p {
font-size: 76px;
font-weight: 400;
position: absolute;
margin: 0px;
width: 100%;
left: 0;
top: 0;
}
@keyframes spin1 {
from {
width: 0%;
}
to {
width: 100%;
}
}
var defaults = {},
one_second = 1000,
one_minute = one_second * 60,
one_hour = one_minute * 60,
one_day = one_hour * 24,
startDate = new Date(),
face = document.getElementById('lazy');
var requestAnimationFrame = function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}();
tick();
function tick() {
var now = new Date(),
elapsed = now - startDate,
parts = [];
parts[0] = '' + Math.floor(elapsed / one_hour);
parts[1] = '' + Math.floor(elapsed % one_hour / one_minute);
parts[2] = '' + Math.floor(elapsed % one_hour % one_minute / one_second);
parts[0] = parts[0].length == 1 ? '0' + parts[0] : parts[0];
parts[1] = parts[1].length == 1 ? '0' + parts[1] : parts[1];
parts[2] = parts[2].length == 1 ? '0' + parts[2] : parts[2];
face.innerText = parts.join(':');
requestAnimationFrame(tick);
}
