Search code examples
javascriptprogress-bartimeline

Javascript Progressbar Timeline

I am trying to create a Progress bar styled timeline that takes 3 dates, and builds a progress bar from them. I found a helpful post on here that I used to build the basics of this, but it doesn't do exactly what I'd like.

Simply, I would like for 0% to be 12/01/13, 100% to be 12/25/13, and then the progress bar to display today's date between that. I have setup a progress bar using some javascript to do the countdown, but I'm not sure what it's calculating from, as it's already at like 85%. Since today is the 6th, it should only be ~24%.

http://eklipztv.com/010110/

^ Demo | Code v

<script type='text/javascript'> 
$(function(){
var target = new Date('12/25/2013'),
    today = new Date(),
    daysToGo = Math.ceil((target.getTime() - today.getTime() ) / (1000*60*60*24)),
    percent = 100 - daysToGo;

$("#progressbar").progressbar({
    value: percent,
    create: function(event, ui) {
        $('.ui-progressbar');
    }
});
});  

</script>
Solution

  • Its your percent calculation that is wrong.

    You should do something like: 

    var percent = 1 - daysToGo/25

    25 being 1st dec to 25th december. Now your percent is in decimals, eq 0.24. Multiply this with 100 if you want the percentage.