.preloader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: #fff;
}
.custom-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 69px;
    height: 12px;
    display: grid;
    animation:d9-0 1s infinite linear;
}

.custom-loader:before,
.custom-loader:after {
    content: "";
    width:31px;
    grid-area: 1/1;
    background:
            radial-gradient(farthest-side,var(--color-primary) 90%,#0000) left,
            radial-gradient(farthest-side,var(--color-primary) 90%,#0000) right;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    animation:d9-1 1s infinite linear;
}
.custom-loader:after {
    margin-left: auto;
    --s:-1;
}

@keyframes d9-0 {
    0%,30% {transform: rotate(0)}
    50%,100%   {transform: rotate(.5turn)}
}

@keyframes d9-1 {
    30%,70% {transform:translate(calc(var(--s,1)*9.5px))}
}