#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    z-index: 9999;
}
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
  }
  .loader:before,
  .loader:after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: var(--main-color);
    -webkit-mask:repeating-linear-gradient(#000 0 5px,#0000 0 10px);
    animation: l35 1.5s infinite;
  }
  .loader:after {
    -webkit-mask:repeating-linear-gradient(#0000 0 5px,#000 0 10px);
    --s:-1;
  }
  @keyframes l35 {
    0%,
    10% {transform: translate(0) rotate(0)}
    35% {transform: translate(calc(var(--s,1)*50%)) rotate(0)}
    66% {transform: translate(calc(var(--s,1)*50%)) rotate(calc(var(--s,1)*180deg))}
    90%,
    100% {transform: translate(0) rotate(calc(var(--s,1)*180deg))}
  }