.hide {
  display: none;
}

.loading {
  color: #fff;
  font-family: Consolas, monospace;
  font-size: 14px;
  text-transform: uppercase;
}
.loading.loading--glitch {
  animation: f 0.5s linear infinite, g 2s linear infinite;
  letter-spacing: 0.5em;
}
.loading.loading--glitch:before, .loading.loading--glitch:after {
  text-align: center;
  content: attr(data-title);
  position: absolute;
  margin: auto;
  overflow: hidden;
  clip: rect(0, 900px, 0 0);
}
.loading.loading--glitch:before {
  text-shadow: 2px 0 blue;
  left: calc( 50% - 50px );
  color: skyblue;
  animation: b 1s infinite linear alternate-reverse;
}
.loading.loading--glitch:after {
  top: -2px;
  font-size: 15px;
  color: red;
  left: calc(50% - 52px);
  text-shadow: -2px 0 red;
  animation: a 1s infinite linear alternate-reverse;
}
.loading.loading--glitch.loading--animation {
  opacity: 0;
  animation: shown 0s linear 1.5s forwards;
  margin-left: -30px;
}
.loading.loading--typing {
  border-right: 0.1em solid;
  text-transform: none;
  width: 13ch;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 1s steps(13, end), blink-caret 0.5s step-end infinite alternate, hiden 0s linear 1.3s forwards;
}
.loading.loading--center {
  position: absolute;
  top: 50%;
  left: calc(50% - 50px);
  margin: 0;
}
.loading.loading--center.loading--typing {
  left: calc(50% - 80px);
}

@keyframes shown {
  to {
    opacity: 1;
  }
}
@keyframes hiden {
  to {
    opacity: 0;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}
@keyframes f {
  0%, 3%, 4.3%, 5%, 42%, 44%, 88%, 90%, 92%, to {
    opacity: 1;
  }
  90% {
    -webkit-transform: translate(-2px);
    transform: translate(-2px);
  }
  43% {
    opacity: 0;
  }
}
@keyframes g {
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform: skew(0, 0);
    transform: skew(0, 0);
  }
  41% {
    transform: scaleY(1.2);
    -webkit-transform: skew(50deg, 0);
    transform: skew(50deg, 0);
  }
  41%, 42% {
    opacity: 0.8;
    -webkit-transform: scaleY(1.2);
  }
  42% {
    transform: scaleY(1.2);
    -webkit-transform: skew(-80deg, 0);
    transform: skew(-80deg, 0);
  }
  43% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform: skew(0, 0);
    transform: skew(0, 0);
  }
}
@keyframes b {
  0% {
    clip: rect(80px, 9999px, 29px, 0);
  }
  5% {
    clip: rect(70px, 9999px, 93px, 0);
  }
  10% {
    clip: rect(95px, 9999px, 37px, 0);
  }
  15% {
    clip: rect(57px, 9999px, 78px, 0);
  }
  20% {
    clip: rect(8px, 9999px, 13px, 0);
  }
  25% {
    clip: rect(41px, 9999px, 35px, 0);
  }
  30% {
    clip: rect(58px, 9999px, 10px, 0);
  }
  35% {
    clip: rect(36px, 9999px, 89px, 0);
  }
  40% {
    clip: rect(91px, 9999px, 33px, 0);
  }
  45% {
    clip: rect(19px, 9999px, 48px, 0);
  }
  50% {
    clip: rect(11px, 9999px, 58px, 0);
  }
  55% {
    clip: rect(8px, 9999px, 58px, 0);
  }
  60% {
    clip: rect(26px, 9999px, 47px, 0);
  }
  65% {
    clip: rect(69px, 9999px, 73px, 0);
  }
  70% {
    clip: rect(74px, 9999px, 42px, 0);
  }
  75% {
    clip: rect(95px, 9999px, 96px, 0);
  }
  80% {
    clip: rect(51px, 9999px, 91px, 0);
  }
  85% {
    clip: rect(56px, 9999px, 17px, 0);
  }
  90% {
    clip: rect(48px, 9999px, 11px, 0);
  }
  95% {
    clip: rect(89px, 9999px, 98px, 0);
  }
  to {
    clip: rect(69px, 9999px, 63px, 0);
  }
}
@keyframes a {
  0% {
    clip: rect(30px, 9999px, 6px, 0);
  }
  5% {
    clip: rect(27px, 9999px, 30px, 0);
  }
  10% {
    clip: rect(6px, 9999px, 20px, 0);
  }
  15% {
    clip: rect(11px, 9999px, 8px, 0);
  }
  20% {
    clip: rect(23px, 9999px, 18px, 0);
  }
  25% {
    clip: rect(34px, 9999px, 25px, 0);
  }
  30% {
    clip: rect(19px, 9999px, 24px, 0);
  }
  35% {
    clip: rect(30px, 9999px, 20px, 0);
  }
  40% {
    clip: rect(24px, 9999px, 22px, 0);
  }
  45% {
    clip: rect(31px, 9999px, 9px, 0);
  }
  50% {
    clip: rect(47px, 9999px, 45px, 0);
  }
  55% {
    clip: rect(5px, 9999px, 6px, 0);
  }
  60% {
    clip: rect(10px, 9999px, 34px, 0);
  }
  65% {
    clip: rect(21px, 9999px, 33px, 0);
  }
  70% {
    clip: rect(19px, 9999px, 31px, 0);
  }
  75% {
    clip: rect(26px, 9999px, 44px, 0);
  }
  80% {
    clip: rect(34px, 9999px, 38px, 0);
  }
  85% {
    clip: rect(45px, 9999px, 40px, 0);
  }
  90% {
    clip: rect(6px, 9999px, 5px, 0);
  }
  95% {
    clip: rect(14px, 9999px, 87px, 0);
  }
  to {
    clip: rect(4px, 9999px, 58px, 0);
  }
}