$loaderColor: #ff0036;
$textColor: #999;

@-webkit-keyframes slm_bars_loader {
  0%, 80%, 100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

@keyframes slm_bars_loader {
  0%, 80%, 100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

.slm-loader-container {
  display: none;
}

.slm-loader-holder {
  height: 300px;
  text-align: center;
  transition: all .3s;
  padding-top: 90px;
  box-sizing: border-box;
}

.slm-loader-text {
  color: $textColor;
  text-align: center;
  font-size: 26px;
  transition: all .3s;
}

.slm-bars-loader {
  background: $loaderColor;
  -webkit-animation: slm_bars_loader 1s infinite ease-in-out;
  animation: slm_bars_loader 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
  color: $loaderColor;
  text-indent: -9999em;
  margin: 35px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;

  &:before {
    background: $loaderColor;
    -webkit-animation: slm_bars_loader 1s infinite ease-in-out;
    animation: slm_bars_loader 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
    position: absolute;
    top: 0;
    content: '';
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }

  &:after {
    background: $loaderColor;
    -webkit-animation: slm_bars_loader 1s infinite ease-in-out;
    animation: slm_bars_loader 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
    position: absolute;
    top: 0;
    content: '';
    left: 1.5em;
  }
}