JQuery TimeCircles - display minutes and seconds in one circle

Question

I'm using the Jquery TimeCircles plug in (https://github.com/wimbarelds/TimeCircles) as a timer on my application, but I would like to have it so that there is only one circle with the minutes and seconds in the middle, like 15:40. I would like the seconds to keep ticking down, but the circle should animate according to the minutes only. Currently I have two circles showing the minutes and seconds.

I would like to start the timer at 50 minutes, and then countdown to 0 minutes and 0 seconds. Is there any way I can have the time display in the format MM:SS inside the one circle, and have the number of seconds ticking down, and the circle animating to the number of minutes ticking down only?

Thank you so much!

Answer 1

I actually had a fairly similar request the other day on github: https://github.com/wimbarelds/TimeCircles/issues/68

You could change it to something like:

var $container = $('#DateCountdown .textDiv_Minutes');
$container.find('h4').text('Time left');
var $original = $container.find('span');
var $clone = $original.clone().appendTo($container);
$original.hide();

$('#DateCountdown').TimeCircles().addListener(function(unit, value, total) {
    total = Math.abs(total);
    var minutes = Math.floor(total / 60) % 60;
    var seconds = total % 60;
    if(seconds < 10) seconds = "0" + seconds;
    $clone.text(minutes + ':' + seconds);
}, "all");

You'd need to use the TimeCircles options that make it only display the Minutes circle.