<div class="logo">
  <div class="title">BE A Hit, Man!</div><br>
  <span class="border"></span>
  <div class="sub">
& absolutely</div>
</div>

<div class="loader">
  <span class="h"></span>
  <span class="h"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="h"></span>
  <span class="h"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="h"></span>
  <span class="h"></span>
  
</div>

</div>

body {
  overflow: hidden; /* Hide scrollbars */
}

@import url(https://fonts.googleapis.com/css?family=Cardo:400,700);

@import url(https://fonts.googleapis.com/css?family=Pontano+Sans);

*{
  margin:0;
  padding:0;
}
body{
  background:black;
}
.logo{
  text-transform:uppercase;
  text-align:center;
  width:575px;
  margin:0 auto;
}
.title{
   font-family: 'Cardo', serif;
   letter-spacing:5px;
   font-size:4.025em;
   color:white;
   opacity:.85;
}
.border{
  border-top:3px solid #6d101a;
  display:block;
  margin-top:-25px;
  width:560px;
  -webkit-filter:blur(1px);
}
.sub{
  font-family: 'Pontano Sans', serif;
  letter-spacing:29px;
  font-size:1.85em;
  margin-left:9px;
  color:#6d101a;
  -webkit-filter:blur(1px);
}
.loader{
  margin-top:50px;
  width:155px;
  margin:50px auto 0 auto;
  height:85px;
}
.loader span{
  display:block;
  float:left;
  background:white;
  height:2%;
  opacity:0;
  -webkit-filter:blur(1px);
  animation: fade 4.5s ease-out infinite;
}
.loader .h{
  animation: fadelong 4.5s ease-out infinite;
}
.loader span:nth-child(1){
 width:2px;
 margin-right:1px;
 animation-delay: .75s;
}
.loader span:nth-child(2){
 width:1px;
  margin-right:1px;
  animation-delay: .8s;
}
.loader span:nth-child(3){
 width:1px;
  margin-right:1px;
  animation-delay: .2s;
}
.loader span:nth-child(4){
 width:7px;
  margin-right:1px;
  animation-delay: .95s;
}
.loader span:nth-child(5){
 width:1px;
  margin-right:1px;
    animation-delay: 1s;

}
.loader span:nth-child(6){
 width:2px;
  margin-right:4px;
    animation-delay: 1.15s;

}
.loader span:nth-child(7){
 width:4px;
  margin-right:5px;
    animation-delay: 1s;

}
.loader span:nth-child(8){
 width:3px;
  margin-right:1px;
    animation-delay: .5s;

}
.loader span:nth-child(9){
 width:1px;
  margin-right:1px;
    animation-delay: .85s;

}
.loader span:nth-child(10){
  width:1px;
  margin-right:4px;
    animation-delay: .25s;

}
.loader span:nth-child(11){
  width:2px;
  margin-right:6px;
    animation-delay: .35s;

}
.loader span:nth-child(12){
  width:1px;
  margin-right:6px;
    animation-delay: .9s;

}
.loader span:nth-child(13){
  width:2px;
  margin-right:1px;
    animation-delay: 1s;

}
.loader span:nth-child(14){
  width:1px;
  margin-right:1px;
    animation-delay: 1.15s;

}
.loader span:nth-child(15){
  width:1px;
  margin-right:5px;
    animation-delay: .15s;

}
.loader span:nth-child(16){
  width:1px;
  margin-right:1px;
    animation-delay:  .25s;

}
.loader span:nth-child(17){
  width:1px;
  margin-right:1px;
    animation-delay: 1.25s;
}
.loader span:nth-child(18){
  width:3px;
  margin-right:1px;
    animation-delay:  1.15s;
}
.loader span:nth-child(19){
 width:2px;
  margin-right:1px;
    animation-delay:  .5s;
}
.loader span:nth-child(20){
 width:1px;
  margin-right:1px;
    animation-delay:  .65s;
}
.loader span:nth-child(21){
  width:4px;
  margin-right:4px;
    animation-delay:  1.25s;
}
.loader span:nth-child(22){
 width:1px;
  margin-right:1px;
    animation-delay:  1.25s;
}
.loader span:nth-child(23){
 width:1px;
  margin-right:1px;
    animation-delay:  .45s;
}
.loader span:nth-child(24){
 width:4px;
  margin-right:5px;
    animation-delay:  1s;
}
.loader span:nth-child(25){
 width:4px;
  margin-right:3px;
    animation-delay:  .4s;
}
.loader span:nth-child(26){
 width:1px;
  margin-right:1px;
    animation-delay:  .75s;
}
.loader span:nth-child(27){
 width:1px;
  margin-right:1px;
    animation-delay:  .2s;
}
.loader span:nth-child(28){
 width:3px;
  margin-right:5px;
    animation-delay:  1s;
}
.loader span:nth-child(28){
 width:3px;
  margin-right:5px;
    animation-delay:  1.1s;
}
.loader span:nth-child(29){
 width:4px;
  margin-right:3px;
    animation-delay:  .75s;
}
.loader span:nth-child(30){
 width:1px;
  margin-right:1px;
    animation-delay:  .9s;
}
.loader span:nth-child(30){
 width:4px;
  margin-right:3px;
    animation-delay:  1.15s;
}
.loader span:nth-child(31){
 width:2px;
  margin-right:5px;
    animation-delay:  .25s;
}
.loader span:nth-child(32){
 width:3px;
  margin-right:2px;
    animation-delay:  .5s;
}
.loader span:nth-child(33){
 width:1px;
  margin-right:1px;
    animation-delay:  .75s;
}
.loader span:nth-child(34){
 width:2px;
  margin-right:0px;
    animation-delay:  1s;
}
@keyframes fade{
  0%{height:2%;}
  1%{opacity:1;}
  50%{height:90%;}
  70%{opacity:1;}
  95%{opacity:0;}
  100%{height:90%;}
}
@keyframes fadelong{
  0%{height:2%;}
  1%{opacity:1;}
  50%{height:100%;}
  70%{opacity:1;}
  95%{opacity:0;}
  100%{height:100%;}
}
/*
 
this is a video of the original loading sequence:
 
http://youtu.be/1dt_OZJJzoU

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.