"Time"
Bootstrap 4.1.1 Snippet by trinhquan

<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();

Related: See More


Questions / Comments: