Post by sn3pe9 on Apr 21, 2017 10:18:53 GMT -8
Hey, im currently trying to make a Clockwise timer, but im running in some problem.
My question is, how can i link the "Timer" to circle animation? So the circle animation runs interdependent on the java-scripted timer.
Here is my code:
My question is, how can i link the "Timer" to circle animation? So the circle animation runs interdependent on the java-scripted timer.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.circle-timer, .pie-timer {
width: 220px;
height: 220px;
position: relative;
box-shadow: #5CB2FE 0 0 25px;
-webkit-border-radius: 200px;
margin: 20px;
display: inline-block;
}
@-webkit-keyframes timer-spin {
0% { -webkit-transform: rotateY(540deg);}
100% { -webkit-transform: rotateY(0deg); }
}
@-webkit-keyframes timer-spin2 {
0% { -webkit-transform: scale(0.6) rotate(0deg); }
100% { -webkit-transform: scale(1.0) rotate(360deg); }
}
@-webkit-keyframes timer-slide {
0% { -webkit-transform: rotate(-225deg); }
50% { -webkit-transform: rotate(-45deg); }
100% { -webkit-transform: rotate(-45deg); }
}
@-webkit-keyframes timer-toggle {
0% { opacity: 0; }
50% { opacity: 0; }
51% {
-webkit-transform: rotate(-45deg);
opacity: 1;
}
75% {
border-top-color: transparent;
}
76% {
border-top-color: #48f;
}
100% {
-webkit-transform: rotate(137deg);
opacity: 1;
border-top-color: #48f;
}
}
.timer-l, .timer-r {
border-radius: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index: 15;
border: 30px solid #48f;
width: 140px;
height: 140px;
margin-left: -100px;
margin-top: -100px;
border-left-color: transparent;
border-top-color: transparent;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
.timer-l {
-webkit-animation-name: timer-slide;
-webkit-animation-timing-function: ease-in;
z-index: 5;
left: 0;
}
.timer-r {
-webkit-animation-name: timer-toggle;
-webkit-animation-timing-function: ease-out;
}
.timer-slot {
position: absolute;
width: 50%;
height: 100%;
top: 0;
left: 50%;
overflow: hidden;
}
.pie-timer .timer-l, .pie-timer .timer-r {
height: 0;
width: 0;
margin: -100px 0 0 -100px;
border-width: 500px;
-webkit-animation-duration: 4s;
}
.timer {
width: 220px;
height: 220px;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<script>
var countDownDate = new Date("Apr 22, 2017 15:30:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<div class="circle-timer">
<div class="timer-r"></div>
<div class="timer-slot"><div class="timer-l"></div></div>
<div class="timer" id="demo"></div>
</div>
</body>
</html>