I took the Javascript date difference counter from a few weeks ago and added a circular progress bar to it with ProgressBar.js.
In the days.animate section, I make sure to prevent the circle from ever
reaching 100%. It will get extremely close as the years pass and the numerator
comes closer and closer to the denominator, but the denominator will always be
slightly larger. Thanks to Eric Davis for helping me
come up with the solution.
Javascript Counter with circular progress
The results:
The javascript, which counts the time since a certain date:
var elements = document.getElementById('s'); var
elementm = document.getElementById('m'); var elementh =
document.getElementById('h'); var elementd = document.getElementById('d');
var seconds = new ProgressBar.Circle(elements, { duration: 200, color:
"#DC242F", trailColor: "#ddd", strokeWidth: 5, trailWidth: 3 }); var minutes =
new ProgressBar.Circle(elementm, { duration: 200, color: "#7FD0E5", trailColor:
"#ddd", strokeWidth: 5, trailWidth: 3 }); var hours = new
ProgressBar.Circle(elementh, { duration: 200, color: "#F5BB6A", trailColor:
"#ddd", strokeWidth: 5, trailWidth: 3 }); var days = new
ProgressBar.Circle(elementd, { duration: 200, color: "#4598C9", trailColor:
"#ddd", strokeWidth: 5, trailWidth: 3 });
shortcode_date = '2016-04-11T11:00:00'
setInterval(function() { now = new Date(); countTo = new Date(shortcode_date);
difference = (now-countTo); var second =
Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
seconds.animate(second / 60, function() { seconds.setText("<span
class=\"number\">" + second + "</span>" + "<span
class=\"label\">Seconds</span>"); }); }, 1000); setInterval(function() { now =
new Date(); countTo = new Date(shortcode_date); difference = (now-countTo); var
minute = Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
minutes.animate(minute / 60, function() { minutes.setText("<span
class=\"number\">" + minute + "</span>" + "<span
class=\"label\">Minutes</span>"); }); }, 1000); setInterval(function() { now =
new Date(); countTo = new Date(shortcode_date); difference = (now-countTo); var
hour = Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
hours.animate(hour / 24, function() { hours.setText("<span class=\"number\">" +
hour + "</span>" + "<span class=\"label\">Hours</span>"); }); }, 1000);
setInterval(function() { now = new Date(); countTo = new Date(shortcode_date);
difference = (now-countTo); var day = Math.floor(difference/(60*60*1000*24)*1);
days.animate(day / (day + 5), function() { days.setText("<span
class=\"number\">" + day + "</span>" + "<span class=\"label\">Days</span>"); });
}, 1000); The elements it targets:
<div id="countup">
<div class="part"><div id="d"></div></div>
<div class="part"><div id="h"></div></div>
<div class="part"><div id="m"></div></div>
<div class="part"><div id="s"></div></div>
</div>And the styles to display it:
#countup { margin-left: auto; margin-right: auto;
text-align: center; font-family: "Lato",Helvetica,Arial,sans-serif; } #countup
span.number { display: block; padding: 0px; margin: 0; font-size:70px;
line-height: 75px; text-align: center; } #countup span.label { display: block;
font-size:25px; line-height: 30px; }
#countup .part { display: inline-block; text-align: center; width: 22%; padding:
1%; }
@media only screen and (max-width: 1200px) { #countup span.number {
font-size:60px; line-height: 65px; text-align: center; } #countup span.label {
display: block; font-size: 20px; line-height: 25px; }
}
@media only screen and (max-width: 820px) { #countup span.number { display:
block; padding: 0px; margin: 0; font-size:40px; line-height: 45px; text-align:
center; } #countup span.label { display: block; font-size:15px; line-height:
15px; }
}
@media only screen and (max-width: 600px) { #countup span.number { display:
block; padding: 0px; margin: 0; font-size:30px; line-height: 35px; text-align:
center; } #countup span.label { display: block; font-size:12px; line-height:
12px; } } Next steps: Registering this with a WordPress shortcode.
