_animatedLines.scss

.loader {
  position: absolute;
  right: 10%;
  top: 31%;
  width: 600px;
  height: 1px;
  background: #bdbdbd;
  opacity: 45%;
}

.loader:last-of-type {
  left: 20%;
  top: 88%;
}

.loader::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #26a69a;
  transform-origin: left;
  animation: animate 10s linear infinite;
  animation-delay: 1s;
  animation-direction: alternate;
}

.loader:last-of-type::before {
  animation-delay: 2s;
  animation-direction: alternate-reverse;
}

@keyframes animate {
  0%,20%
  {
    transform: scaleX(0);
  }
  40%
  {
    opacity: 100%;
   transform: scaleX(1);
    transform-origin: left;
  }
  40.000001%,60%
  {
    transform: scaleX(1);
    transform-origin: right;
    }
  80%,100%
  {
    transform: scaleX(0);
    transform-origin: right;
  }
	
}

.loader::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 4px;
  height: 4px;
  background: #26a69a;
  border-radius: 50%;
  animation: animateDot 10s linear infinite;
  animation-delay: 1s;
  animation-direction: alternate;
  }

  .loader:last-of-type::after {
    animation-delay: 2s;
    animation-direction: alternate-reverse;
  }

@keyframes animateDot {
	0%
  {
  transform: translateY(-50%) scale(0);
  }
  5%
  {  
     transform: translateY(-50%) scale(1);
  }
  15%,20%
  {
      transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 4px #26a69a22,
      0 0 0 10px #26a69a22,
      0 0 20px #26a69a,
      0 0 40px 5px #26a69a,
      0 0 60px 10px #26a69a;   
  }
  40%
  {
    transform: translateY(-50%)  translateX(600px) scale(1);
  }
  80%
  {
    transform: translateY(-50%) translateX(600px) scale(1) ;
      box-shadow: 0 0 0 4px #26a69a22,
      0 0 0 10px #26a69a22,
      0 0 20px #26a69a,
      0 0 40px 5px #26a69a,
      0 0 60px 10px #26a69a; 
  }
  95%
  {
    transform: translateY(-50%) translateX(600px)  scale(1) ;
      box-shadow: none;
  }
  100%
  {
    transform: translateY(-50%) translateX(600px) scale(0) ;
  }
}