.loading {
    text-transform: uppercase;
width: 285px;
text-align: center;
line-height: 50px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: auto;
transform: translateY(-50%);
font-weight: 400;
}

.loading span {
  position:relative;
  z-index:999;
  color:#fff;
}
.loading:before {
    content: '';
background: #222200ff;
/* width: 128px; */
/* height: 86px; */
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: 2s loadingBefore infinite ease-in-out;
}

@keyframes loadingBefore {
  0%   {transform:translateX(-14px);}
  50%  {transform:translateX(14px);}
  100% {transform:translateX(-14px);}
}


.loading:after {
    content: '';
background: #6694d5;
width: 2px;
/* height: 60px; */
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/* opacity: .5; */
animation: 2s loadingAfter infinite ease-in-out;
}

@keyframes loadingAfter {
  0%   {transform:translateX(-50px);}
  50%  {transform:translateX(50px);}
  100% {transform:translateX(-50px);}
}