CodePen

HTML

            
              <div id="main">
   <div id="images">
     <div id="window">
       <img class="single-image" src="http://www.singedcatstudios.com/wp-content/uploads/2010/03/Singed_Cat_Studios_ID_by_SingedCatStudios.jpg" alt="cat" />
       <img class="single-image" src="http://www.dog-names-and-more.com/images/tough-dog-names-bad-dog.jpg" alt="dog" />
       <img class="single-image" src="http://thumbs.dreamstime.com/thumblarge_598/1302574554qB5jwk.jpg" alt="mice" />
     </div>
  </div>
  <div class="button" id="cat-btn">
    <span class="item">Cat</span>
    <div class="loader">
    </div>
  </div>
  <div class="button" id="dog-btn">
    <span class="item">Dog</span>
    <div class="loader">
    </div>
  </div>
  <div class="button" id="mice-btn">
    <span class="item">Mice</span>
    <div class="loader">
    </div>
  </div>
</div>
            
          
!

CSS

            
              #main{
 width:400px;
 padding:10px;
 margin:0 auto;
 background:#555;
 overflow:auto;
}
#images{
 width:400px;
  overflow:hidden;
}
#window{
 width:1500px;
  -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
     -o-transition: all 200ms ease;
		transition: all 200ms ease;
}
#images .single-image{
 float:left;
}
.button{
 width:33.33%;
 background-color:#333;
 float:left;
}
.button .item{
 padding:10px;
 color:#fff;
 font-size:12px;
 font-weight:bold;
}
.loader{
  background-color:#BADA55;
  width:0%;
  height:5px;
}
.full-width{
 width:100%;
  -webkit-transition: all 2000ms ease-out;
  	-moz-transition: all 2000ms ease-out;
    -ms-transition: all 2000ms ease-out;
     -o-transition: all 2000ms ease-out;
		transition: all 2000ms ease-out;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var windoz = $('#window');
var counter = 0;
var nImages = $('.item').length;
var currentSlide = 0;
$('.loader').first().addClass('full-width')
setInterval(function(){
  currentSlide++;
  $('.loader').removeClass('full-width');
  var currentLoader = $($('.loader')[currentSlide % nImages]);
  currentLoader.addClass('full-width');
  counter += 400;
  console.log(currentLoader);
  windoz.css('margin-left', -1 * (counter % (400 * nImages)));
},2000);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................