JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<body>
    <div class="container">
        <h2>Destiny Public Events</h2>
        <h3>Earth: Old Russia</h3>
        
        <div class="info-box dark" data-offset="15" data-repeat="30" data-duration="10">
            <span class="icon">
                <img src="http://img2.wikia.nocookie.net/__cb20140616234002/destinypedia/images/4/40/Explore_emblem.png"/>
            </span>
            <span class="countdown"></span>
            <div class="content">
                <h4>The Steppes</h4>
                <p>Defeat Extraction Crews</p>
            </div>

            <div class="progress">
              <div class="progress-bar progress-bar-warning" role="progressbar">
              </div>
            </div>
        </div>
        
        <div class="info-box dark" data-offset="0" data-repeat="30" data-duration="0">
            <span class="icon">
                <img src="http://img2.wikia.nocookie.net/__cb20140616234002/destinypedia/images/4/40/Explore_emblem.png"/>
            </span>
            <span class="countdown"></span>
            <div class="content">
                <h4>Mothyards</h4>
                <p>Defend the Warsat OR Kill boss</p>
            </div>            
            <div class="progress">
              <div class="progress-bar progress-bar-warning" role="progressbar">
              </div>
            </div>
        </div>
        
        <div class="info-box dark" data-offset="10" data-repeat="30" data-duration="5">
            <span class="icon">
                <img src="http://img2.wikia.nocookie.net/__cb20140616234002/destinypedia/images/4/40/Explore_emblem.png"/>
            </span>
            <span...

CSS

.info-box {
    padding: 0px;
    margin: 5px 0px;
}

.info-box .icon {
    float: left;
    margin-right: 3px;
    padding: 0px 3px 0px 3px;
}

.info-box .icon > img {
    height: 80px;
}

.info-box .content {
    padding: 3px;
}

.info-box .progress {
    margin: 0px;
    height: 5px;
    border-radius: 0px;
    background-color: transparent;
}

.info-box .countdown {
    float: right;
    padding: 3px;
}

.dark {
    color: white;
    background-color: #2F344C;
}

.dark .icon {
    background-color: #2D4677;
}

JavaScript

$(function() {
    function updateAllEvents() {
        $('.info-box').each(function() {
            var box = $(this);
            var countDown = box.find('.countdown');
            var progressBar = box.find('.progress-bar');
            var eventOffsetData = parseInt(box.data('offset'));
            var eventRepeatData = parseInt(box.data('repeat'));
            var eventDurationData = parseInt(box.data('duration'));
            var eventHappening = false;

            // eventStart represents the closest start time
            // get the start of the current hour
            // add when the event starts
            var eventStart = moment().startOf('hour').add(eventOffsetData, 'm');
            
            // add an hour so that it is in the future
            //WARN - probably bugged
            if (moment().diff(eventStart) > 0) {
                if (moment(eventStart).add(eventRepeatData, 'm').diff(eventStart) > 0)  {                
                    eventStart.add(eventRepeatData, 'm');
                } else {
                    eventStart.add(1, 'h');
                }
            }
            // WARN 'fix' for bug
            if (eventStart.diff(moment(), 'minutes') < 0) {
                eventStart.add(eventRepeatData, 'm');
            }
            
            var percent = Math.round((((eventRepeatData - eventStart.diff(moment(), 'minutes')) / eventRepeatData) * 100));
            
            //TODO check if in duration i.e. NOW
            eventHappening = false;//moment().add(eventDurationData, 'm').diff(eventStart, 'minutes') > 0; // gt means it's past
            
            if (eventHappening) {
                countDown.html( "In progress" );
                //box remove dark, use red 
            } else {
                countDown.html( eventStart.fromNow() );
                progressBar.width(percent + "%");
            }
        });
    }

    updateAllEvents();    
    setInterval(updateAllEvents, 30 * 1000);
});