.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 30px;
    aspect-ratio: 2;
    --pattern: no-repeat radial-gradient(circle closest-side, #b660eb 90%, #0000);
    background:
        var(--pattern) 0% 50%,
        var(--pattern) 50% 50%,
        var(--pattern) 100% 50%;
    background-size: calc(100% / 3) 50%;
    animation: prog 1s infinite linear;
}

@keyframes prog {
    20% {
        background-position:
            0% 0%,
            50% 50%,
            100% 50%;
    }
    40% {
        background-position:
            0% 100%,
            50% 0%,
            100% 50%;
    }
    60% {
        background-position:
            0% 50%,
            50% 100%,
            100% 0%;
    }
    80% {
        background-position:
            0% 50%,
            50% 50%,
            100% 100%;
    }
}
