Progress Bar Calendar

by Daniel Pegues

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://datejs.googlecode.com/files/date.js"></script>
<div class="progress-calendar">
    <div class="progress progress-min progress-striped active">
      <div class="progress-bar progress-bar progress-bar-success" style="width: 0%">
      </div>
    </div>
    
    
    <div class="progress progress-hour progress-striped active">
      <div class="progress-bar progress-bar progress-bar-success" style="width: 0%">
      </div>
    </div>
    
    
    <div class="progress progress-day progress-striped active">
      <div class="progress-bar progress-bar progress-bar-success" style="width: 0%">
      </div>
    </div>
    
    
    <div class="progress progress-month progress-striped active">
      <div class="progress-bar progress-bar progress-bar-success" style="width: 0%">
      </div>
    </div>

    
    <div class="progress progress-year progress-striped active">
      <div class="progress-bar progress-bar progress-bar-success" style="width: 0%">
      </div>
    </div>
</div>

CSS

.progress-calendar {
    width: 500px;
    margin: 10px;
    text-align: center;
}
.progress.active .progress-bar {
    -webkit-animation: none;
    animation: none;
    -webkit-transition: none;
    transition: none;
}
.progress-calendar h4 {
    font-size: 12px;
}
.progress {
    height: 20px;
    position: relative;
    margin-bottom: 3px;
}

.progress i.tick {
    position: absolute;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    font-size: 8px;
    color: #999999;
    height: 100%;
}

.progress i.tick {
    border-right: 1px solid #999999;
}
.progress i.tick:last-of-type {
    border-right: 0;
}
.progress i.tick.small {
    font-size: 6px;
    border-right: 0;
}
.progress i.tick.medium {
    font-size: 6px;
}

JavaScript

jQuery(function($) {
    var $progress = $(".progress-calendar");

    function getCompletion() {
        var now = new Date(),
            fullYear = now.getFullYear(),
            month = now.getMonth(),
            day = now.getDate(),
            hour = now.getHours(),
            min = now.getMinutes(),
            startOfYear = new Date(fullYear, 0, 1),
            startOfNextYear = new Date(fullYear + 1, 0, 1),
            startOfMonth = new Date(fullYear, month, 1),
            startOfNextMonth = new Date(fullYear, month + 1, 1),
            startOfDay = new Date(fullYear, month, day),
            startOfHour = new Date(fullYear, month, day, hour, 0, 0),
            startOfMin = new Date(fullYear, month, day, hour, min, 0),
            // year completion
            ticksThisYear = startOfNextYear - startOfYear,
            ticksSinceYearStarted = now - startOfYear,
            yearCompletion = (ticksSinceYearStarted / ticksThisYear) * 100,
            // month completion
            ticksThisMonth = startOfNextMonth - startOfMonth,
            ticksSinceMonthStarted = now - startOfMonth,
            monthCompletion = (ticksSinceMonthStarted / ticksThisMonth) * 100,
            // day completion
            ticksThisDay = 24*60*60*1000,
            ticksSinceDayStarted = now - startOfDay,
            dayCompletion = (ticksSinceDayStarted / ticksThisDay) * 100,
            // hour completion
            ticksThisHour = 60*60*1000,
            ticksSinceHourStarted = now - startOfHour,
            hourCompletion = (ticksSinceHourStarted / ticksThisHour) * 100,
            // min completion
            ticksThisMin = 60*1000,
            ticksSinceMinStarted = now - startOfMin,
            minCompletion = (ticksSinceMinStarted / ticksThisMin) * 100;
            
        return {
            year: yearCompletion,
            month: monthCompletion,
            day: dayCompletion,
            hour: hourCompletion,
            min: minCompletion
        };
   ...