Countdown as a progress bar

[sunugur]

I would like to show the countdown as a progress bar instead of time left?

Searched the site on how to to do it but could not find a way to do it, any help would be appreciated

[webwamp]

hi @sunugur that to easy. set countdown and on update get total seconds and just divide on main total seconds and multiplication 100 finally you get percentage passed time and you can used for show progress or else, as example:

`var mainTotalSeconds = 600; // 10 min

/* inside countdown on update function : */

var passedTotalSeconds = parseInt(e.strftime("%S")); // for example return : 450

var percentage = ( passedTotalSeconds / mainTotalSeconds ) * 100; // example result is : 75
$(".progress-bar").css("width",percentage + "%"); // 75% filled now and be less

// or if you want filled progress bar by passing time you should do this:

var percentage = 100 - ( ( passedTotalSeconds / mainTotalSeconds ) * 100 ); // example result is : 25
$(".progress-bar").css("width",percentage + "%"); // 25% filled now and be more
`