.loading-div{
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 1.8rem;
}

.loader {
    position: relative;
    width: 100px;
    height: 16px;
    margin-left: 1rem;
  }
  .loader:before , .loader:after{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dark-accent);
    box-shadow: 32px 0 var(--dark-accent);
    left: 0;
    top: 0;
    animation: ballMoveX 2s linear infinite;
  }
  .loader:after {
    box-shadow: none;
    transform: translateX(64px) scale(1);
    z-index: 2;
    animation: none;
    animation: trfLoader 2s linear infinite;
  }
  
  @keyframes trfLoader {
    0% , 5%{
      transform: translateX(64px) scale(1);
      background: var(--dark-color);
    }
    10%{
      transform: translateX(64px) scale(1);
      background: var(--dark-accent);
    }
    40%{
        transform: translateX(32px) scale(1.5);
        background: var(--dark-accent);
      }
    90%, 95% {
      transform: translateX(0px) scale(1);
      background: var(--dark-accent);
    }
    100% {
      transform: translateX(0px) scale(1);
      background: var(--dark-color);
    }
  }
  @keyframes ballMoveX {
    0% , 10%{  transform: translateX(0) }
    90%, 100% { transform: translateX(32px) }
  }