@keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.loading {
  position: relative;
  .child {
    border-radius: 3px;
    animation-fill-mode: both;
    position: absolute;
    width: 6px;
    margin-left: -3px;
  }
  .child-1 {
    animation: line-spin-fade-loader 0.8s 0s infinite ease-in-out;
  }
  .child-2 {
    animation: line-spin-fade-loader 0.8s 0.1s infinite ease-in-out;
  }
  .child-3 {
    animation: line-spin-fade-loader 0.8s 0.2s infinite ease-in-out;
  }
  .child-4 {
    animation: line-spin-fade-loader 0.8s 0.3s infinite ease-in-out;
  }
  .child-5 {
    animation: line-spin-fade-loader 0.8s 0.4s infinite ease-in-out;
  }
  .child-6 {
    animation: line-spin-fade-loader 0.8s 0.5s infinite ease-in-out;
  }
  .child-7 {
    animation: line-spin-fade-loader 0.8s 0.6s infinite ease-in-out;
  }
  .child-8 {
    animation: line-spin-fade-loader 0.8s 0.7s infinite ease-in-out;
  }
}