.loading {
    --scale: 1.5;
    --line-width: calc(8px * var(--scale));
    --line-color: #006aff;
    --dot-color: #ff8000;

    --color: no-repeat linear-gradient(var(--line-color) 0 0);
    width: calc(40px * var(--scale));
    height: calc(30px * var(--scale));
    background: var(--color) 0 100% / var(--line-width) calc(30px * var(--scale)), var(--color) 50% 100% / var(--line-width) calc(20px * var(--scale)), var(--color) 100% 100% / var(--line-width) calc(10px * var(--scale));
    position: relative;
    clip-path: inset(-100% 0);
}

.loading:before {
    content: "";
    position: absolute;
    width: var(--line-width);
    height: var(--line-width);
    border-radius: 50%;
    background: var(--dot-color);
    left: calc(-16px * var(--scale));
    top: 0;
    animation: loading-1 2s linear infinite,
    loading-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
}

@keyframes loading-1 {
    0% {
        left: calc(-16px * var(--scale));
        transform: translateY(calc(-8px * var(--scale)));
    }
    100% {
        left: calc(100% + 8px * var(--scale));
        transform: translateY(calc(22px * var(--scale)));
    }
}

@keyframes loading-2 {
    100% {
        top: calc(-0.1px * var(--scale));
    }
}