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.

View more TIL posts