*{
margin:0;
padding:0;
}
body{
 
  margin: 0;
  padding: 0;
  background:#fff;
}
   
.loader{
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.loader span{
  color:rgba(225,225,225,.1);
  font-size: 5em;
  display: inline-block;
  transition: all 0.5s;
  animation: animate 2s infinite;
    font-family: 'Bebas Neue';
}
.loader span:nth-child(1){
  animation-delay: .1s;
}
.loader span:nth-child(2){
  animation-delay: .2s;
}
.loader span:nth-child(3){
  animation-delay: .3s;
}
.loader span:nth-child(4){
  animation-delay: .4s;
}
.loader span:nth-child(5){
  animation-delay: .5s;
}
.loader span:nth-child(6){
  animation-delay: .6s;
}
.loader span:nth-child(7){
  animation-delay: .7s;
}
@keyframes animate{

0%{
  color:rgba(225,225,225,.1);
  transform:translateY(0);
  margin-left: 0;
}
25%{
  color:#7c256a;
  transform:translateY(-15px);
  margin-left: 10px;
  text-shadow: 0 15px 1px rgba(0,0,0,.3);
}
100%{
  color:rgba(225,225,225,.1);
  transform:translateY(0);
}

}