CodePen

HTML

            
              <div class="scrubber">
  <span class="track"><i class="progress"></i></span>
  <span class="shadow"></span>
  <p>Thrift Shop (feat. Wanz)<br>
    <span>Macklemore & Ryan Lewis</span></p>
</div>
            
          
!

CSS

            
              .scrubber {
  width: 640px;
  height: 120px;
  background: black;
  color: white;
  font-family: Helvetica, sans-serif;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  
  &.scrubbing {
    .shadow {
      opacity: 0.3;
    }
    p {
      opacity: 0;
      @include scale(1.5);
    }
  }
  
  .track,
    .progress,
    .shadow,
    p {
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .track {
    background: image-url("http://i.imgur.com/BNbXR.png");
  }
  
  .progress {
    width: 50%;
    background: image-url("http://i.imgur.com/RajTZ.png");
    @include single-transition(width, 50ms, ease);
  }
  
  .shadow {
    background: image-url("http://i.imgur.com/QdDho.png");
    opacity: 0.95;
    @include single-transition(opacity, 250ms, ease);
  }
  
  p {
    padding: 30px 20px;
    font-size: 30px;
    line-height: 28px;
    @include experimental(font-smoothing, antialiased);
    @include single-transition(all, 250ms, ease);
    @include text-shadow(0 2px rgba(0,0,0,0.5));
    
    span {
      font-size: 26px;
      color: #808080;
    }
  }
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              (function () {

  var $scrubber = $('.scrubber'),
      $progress = $scrubber.find('.progress'),
      sW = $scrubber.width(),
      scrubbing = false;
  
  function scrub (pos) {
    pos -= 10;
    $progress.width(pos);
  }
  
  $scrubber.on("mousedown", function (e) {
    $(this).addClass('scrubbing');
    scrubbing = true;
    e.preventDefault();
    // scrub(e.pageX);
  });
  
  $scrubber.on("mouseup mouseleave", function () {
    $(this).removeClass('scrubbing');
    scrubbing = false;
  });
  
  $scrubber.on("mousemove", function (e) {
    if (!scrubbing) {
      return;
    }
    e.preventDefault();
    scrub(e.pageX);
  });
  
  window.setInterval(function () {
    w = $progress.width();
    if (w < sW && !scrubbing) {
      $progress.width($progress.width() + 0.5);
    }
  }, 40);
  
}());
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................