<div id="preloader">
  <div id="pl-wiper"></div>
  <div id="pl-line"></div>
</div>

<style>
#preloader{
  width:100%;
  height:100vh;
  background:white;
  overflow:hidden;
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:10000;
}

#pl-wiper{
  background:#012d48;
  position:relative;
  width:100%;
  height:100vh;
  float:right;
  animation-name:wiper-swipe;
  animation-duration:3s;
  animation-timing-function:linear;
}

#pl-line{
  border-bottom:solid 2px #48c643;
  position:absolute;
  top:70%;
  animation-name:line-swipe;
  animation-duration:3s;
  animation-timing-function:linear;
}

@keyframes wiper-swipe {
    0%   {width:100%;}
    50%  {width:0%;}
    100% {width:0%;}
}

@keyframes line-swipe {
    0%   {width:15%;}
    50%  {width:115%;}
    100% {width:115%;}
}

@keyframes preloader-fade{
  0%  {opacity:1;}
  75% {opacity:1;}
  100% {opacity:0;}
}
</style>

<script>
    jQuery(window).load(function(){
        jQuery('#preloader').fadeOut().css('display','none');
    });
</script>