Edit on
<div class="megatron" data-type="hero">
  <div class="main player">
    <div class="progress">
      <div class="value"></div>
    </div>
    
  </div>
  
  <div class="carousel">
    <div class="item active"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  
  
</div>
@import "compass/css3";

  @-webkit-keyframes progress {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

.megatron {
  
  width: 480px;
  position: relative;

  .main.player {
    width: 480px;
    height: 270px;
    background: #333;
    position: relative;
    
    .progress {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 6px;
      background: #000;
      
      .value {
        height: 100%;
        width: 0%;
        background: #c80000;
        
        &.playing {
          -webkit-animation: progress 10s linear;
        }

      }
    }
  } 
  
  .carousel {
    width: 100%;
    white-space: nowrap;
    overflow: scroll;
    line-height: 0;
    margin-top: .4em;
    
    &:hover .item {
      height: 60px;
    }
    
    .item {
      display: inline-block;
      width: 30%;
      height: 8px;
      background: #888;
      margin-right: 1%;
      -webkit-transition: height .4s, background .3s;
      
      &:hover {
        background: #369;
      }
      
      &.active {
        background: #ca8000;
      }
    }
  }
}
View Compiled
$(document).ready(function () {

  $('.megatron .main.player .value').addClass("playing");
  
  $('.megatron .carousel .item').on('click', function () {
     $('.megatron .carousel .item').removeClass('active');
     $('.megatron .main.player .value').removeClass("playing");
     setTimeout(function() {
       $('.megatron .main.player .value').addClass("playing");
     })
     $(this).addClass('active');
   })
  
  $('.megatron .main.player').on('webkitAnimationEnd', function () {
    var activeIndex = $('.megatron .carousel .item.active').index();
    var numItems = $('.megatron .carousel .item').length;
    var index =  activeIndex < numItems -1 ? activeIndex + 1 : 0;
    
    $('.megatron .carousel .item').removeClass('active');
    $('.megatron .main.player .value').removeClass("playing");
    
    setTimeout(function() {
      $('.megatron .main.player .value').addClass("playing");
    })

    $( $('.megatron .carousel .item')[index] ).addClass('active');
    
    
    
  })
  
});
Rerun