Allow to Start with full Circle for Seconds < 60 Countdown

[simonbuehler]

hi,

i like your work and am using it for a Countdown with less than 60 Seconds. How can i change the behaviour so that the Circle starts full even with e.g. 40 seconds and ends at zero?

greets!

[wimbarelds]

Hi there, you can do this as follows:

$('#Timer').TimeCircles({
    total_duration: 40,
    count_past_zero: false,
    time: {
        Days: { show: false },
        Hours: { show: false },
        Minutes: { show: false }
    }
});

[simonbuehler]

hi,

thanks for your response, maybe i was unclear. i managed to only show the seconds circle but with 40secs i doesn't start fully filled (only with 60 sec of course) I'd like to change it so that no matter how many seconds (less than 60) are set as the total_duration the circle starts full and ends empty at zero (the "step" size must be calculated depending on total_duration somhow)

[wimbarelds]

Have you tried it? The total_duration: 40 makes it so that the circle is full at 40 seconds.

If you want to automate this process, it would basically be:

var $timer = $('#Timer');
var tc_config = {
    count_past_zero: false,
    time: {
        Days: { show: false },
        Hours: { show: false },
        Minutes: { show: false }
    }
}

tc_config.total_duration = parseInt($timer.data('timer'));
$timer.TimeCircles(tc_config);

[simonbuehler]

sorry for beeing dumb,

works like a charm! had the data-timer attribute removed now its all good, thanks!