Circular Progress Bar Count Up with Javascript

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(""number">" + second + "" + ""label">Seconds"); }); }, 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(""number">" + minute + "" + ""label">Minutes"); }); }, 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(""number">" + hour + "" + ""label">Hours"); }); }, 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(""number">" + day + "" + ""label">Days"); }); }, 1000); 

The elements it targets:

 id="countup"> 	 class="part"> id="d">
class="part"> id="h"> class="part"> id="m"> class="part"> id="s">

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.

Like this:

Like Loading…

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: