loader {
    border-radius: 50% 0;
    display: block;
    position: relative;
    animation: 1s spinner infinite;
    aspect-ratio: 1;
    scale: 80%;
}

loader::before {
    width: 25%;
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    background: hsl(270, 20%, 60%);
    animation: 1s mover infinite;
}

loader::after {
    width: 25%;
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    background: hsl(120, 20%, 60%);
    animation: 1s mover2 infinite;
}

@keyframes spinner {
    18% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }

    32% {
        transform: rotate(90deg);
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    50% {
        transform: rotate(90deg);
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }

    68% {
        transform: rotate(90deg);
        animation-timing-function: linear;
    }

    82% {
        transform: rotate(180deg);
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    100% {
        transform: rotate(180deg);
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }
}

@keyframes mover {
    0% {
        top: 0%;
        left: 100%;
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }

    18% {
        top: 50%;
        left: 100%;
        animation-timing-function: linear;
    }

    32% {
        top: 50%;
        left: 100%;
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    50% {
        top: 100%;
        left: 100%;
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }

    68% {
        top: 100%;
        left: 50%;
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    82% {
        top: 100%;
        left: 50%;
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    100% {
        top: 100%;
        left: 0%;
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }
}

@keyframes mover2 {
    0% {
        top: 100%;
        left: 0%;
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }

    18% {
        top: 50%;
        left: 0%;
        animation-timing-function: linear;
    }

    32% {
        top: 50%;
        left: 0%;
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    50% {
        top: 0%;
        left: 0%;
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }

    68% {
        top: 0%;
        left: 50%;
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    82% {
        top: 0%;
        left: 50%;
        animation-timing-function: cubic-bezier(.5, 1, .5, 1);
    }

    100% {
        top: 0%;
        left: 100%;
        animation-timing-function: cubic-bezier(.5, 0, .5, 0);
    }
}