<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/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="countdown">
<div class="container days">
<canvas id="days-canvas" width="200" height="200"></canvas>
<svg width="200" height="200">
<circle id="outer" cx="100" cy="100" r="90" fill="transparent" stroke-width="20" stroke="#FF99C8" opacity="0.1"/>
</svg>
<div class="label">
<span id="days-value"></span><br>
<span>days</span>
</div>
</div>
<div class="container hours">
<canvas id="hours-canvas" width="200" height="200"></canvas>
<svg width="200" height="200">
<circle id="outer" cx="100" cy="100" r="90" fill="transparent" stroke-width="20" stroke="#FCF6BD" opacity="0.1"/>
</svg>
<div class="label">
<span id="hours-value"></span><br>
<span>hours</span>
</div>
</div>
<div class="container minutes">
<canvas id="minutes-canvas" width="200" height="200"></canvas>
<svg width="200" height="200">
<circle id="outer" cx="100" cy="100" r="90" fill="transparent" stroke-width="20" stroke="#EEBF96" opacity="0.1"/>
</svg>
<div class="label">
<span id="minutes-value"></span><br>
<span>minutes</span>
</div>
</div>
<div class="container seconds">
<canvas id="seconds-canvas" width="200" height="200"></canvas>
<svg width="200" height="200">
<circle id="outer" cx="100" cy="100" r="90" fill="transparent" stroke-width="20" stroke="#A8FBCA" opacity="0.1"/>
</svg>
<div class="label">
<span id="seconds-value"></span><br>
<span>seconds</span>
</div>
</div>
</div>
body {
background-color: transparent;
font-family: "Lato", sans-serif;
}
.countdown {
display: flex;
justify-content: space-between;
margin: 20vh auto 0 auto;
width: 60%;
min-width: 800px;
}
.countdown .container {
position: relative;
}
.countdown .container svg {
position: absolute;
top: 0;
left: 15px;
}
.countdown .container .label {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-75%, -55%);
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.countdown .container .label span:first-of-type {
font-size: 55px;
color: #000;
}
.countdown .container .label span:nth-of-type(2) {
font-size: 20px;
text-transform: uppercase;
color: #000;
}
@media screen and (max-width: 800px) {
.countdown {
flex-direction: column;
align-items: center;
height: 900px;
width: auto;
min-width: auto;
}
}
// Set Launch Date (ms)
const launchDate = new Date("Jan 1, 2025 10:15:00").getTime();
// Context object
const c = {
context: {},
values: {},
times: {}
};
// Convert radians to degrees
function deg(d) {
return (Math.PI/180)*d-(Math.PI/180)*90;
}
function render() {
c.context.seconds.clearRect(0, 0, 200, 200);
c.context.seconds.beginPath();
c.context.seconds.strokeStyle = "#A9DEF9";
c.context.seconds.arc(100, 100, 90, deg(0), deg(6 * (60 - c.times.seconds)));
c.context.seconds.lineWidth = 20;
c.context.seconds.lineCap = "round";
c.context.seconds.stroke();
c.context.minutes.clearRect(0, 0, 200, 200);
c.context.minutes.beginPath();
c.context.minutes.strokeStyle = "#A8FBCA";
c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (60 - c.times.minutes)));
c.context.minutes.lineWidth = 20;
c.context.minutes.lineCap = "round";
c.context.minutes.stroke();
c.context.hours.clearRect(0, 0, 200, 200);
c.context.hours.beginPath();
c.context.hours.strokeStyle = "#EEBF96";
c.context.hours.arc(100, 100, 90, deg(0), deg(15 * (24 - c.times.hours)));
c.context.hours.lineWidth = 20;
c.context.hours.lineCap = "round";
c.context.hours.stroke();
c.context.days.clearRect(0, 0, 200, 200);
c.context.days.beginPath();
c.context.days.strokeStyle = "#FF99C8";
c.context.days.arc(100, 100, 90, deg(0), deg(365 - c.times.days));
c.context.days.lineWidth = 20;
c.context.days.lineCap = "round";
c.context.days.stroke();
}
function init() {
// Get 2D contexts
c.context.seconds = document.getElementById('seconds-canvas').getContext('2d');
c.context.minutes = document.getElementById('minutes-canvas').getContext('2d');
c.context.hours = document.getElementById('hours-canvas').getContext('2d');
c.context.days = document.getElementById('days-canvas').getContext('2d');
// Get displayed values
c.values.seconds = document.getElementById('seconds-value');
c.values.minutes = document.getElementById('minutes-value');
c.values.hours = document.getElementById('hours-value');
c.values.days = document.getElementById('days-value');
setInterval(function() {
// Get todays date and time (ms)
const now = new Date().getTime();
// Get distance from now to launchDate
const distance = launchDate - now;
// Time calculations
c.times.days = Math.floor(distance / (1000 * 60 * 60 * 24));
c.times.hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
c.times.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
c.times.seconds = Math.floor((distance % (1000 * 60)) / 1000);
c.values.days.innerText = c.times.days;
c.values.hours.innerText = c.times.hours;
c.values.minutes.innerText = c.times.minutes;
c.values.seconds.innerText = c.times.seconds;
render(); // Draw!
}, 1000);
}
init();
