%a.nyt-link.kb-link(href="http://austinkregel.com")
  %i.fa.fa-users.kb-link.size-72
  View iframe
%br
%a.nyt.kb-link(href="#")
  You can't view crap.
  
  .iframe
View Compiled
*{margin:0;padding:0;}
.iframe{
  width:75%;
  min-height:50px;
  background:#F1A9A0;
  position:absolute;
  top:0;
  bottom:0;
  left:100%  ;
  transition:0.4s all;
}
.iframe > iframe{
  border:none;
  border-left:solid 2px gray;
}
.iframe:hover{
  left:25%;
}
.loader {
  margin:0 auto;
  position:absolute;
  top:calc(50% - 15px);
  margin:calc(50% - 25px);
  margin-top:-25px;
}
.loader {
  width: 3em;
  height: 2em;
  background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
  background-repeat: no-repeat;
  background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
  animation: audioWave 1.5s linear infinite;
}
@keyframes audioWave {
  25% {
    background: linear-gradient(#3498db, #3498db) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
  }
  37.5% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#3498db, #3498db) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
  }
  50% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#3498db, #3498db) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em;
  }
  62.5% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#3498db, #3498db) 1.875em 50%, linear-gradient(#9b59b6, #9b59b6) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em;
  }
  75% {
    background: linear-gradient(#9b59b6, #9b59b6) 0 50%, linear-gradient(#9b59b6, #9b59b6) 0.625em 50%, linear-gradient(#9b59b6, #9b59b6) 1.25em 50%, linear-gradient(#9b59b6, #9b59b6) 1.875em 50%, linear-gradient(#3498db, #3498db) 2.5em 50%;
    background-repeat: no-repeat;
    background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em;
  }
}
$(document).ready(function(){  
  $('.nyt-link').click(function(e){
    console.log("Click!");
    e.preventDefault();
    console.log($(e.target).attr('href'));
    $('.iframe').append('<iframe src="'+$(e.target).attr('href')+'" style="width:100%;height:100%;" id="iframe"/></iframe>');
    $('.iframe').css('left','25%').css('width','75%');
    
    $('.iframe').ready(function(){    
      console.log("iFrame ready!!");
      $(this).show();
    });
  });
});
$(document).mouseup(function (e){
    var container = $(".iframe");
    if (!container.is(e.target)        && container.has(e.target).length === 0){
        container.css('left','100%');
        container.css('width','0');
        container.text('');
    }
});
Run Pen

External CSS

  1. http://kbcomp.co/css/kb-bootstrap.css.php
  2. http://embb.pw/css/fontawesome.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js