.loader {
    width: 100px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 70%;
    border-color: #ccc #0000;
    animation: l16 1s infinite linear;
}

    .loader::before,
    .loader::after {
        content: "";
        grid-area: 1/1;
        margin: 2px;
        border: inherit;
        border-radius: 50%;
    }

    .loader::before {
        border-color: midnightblue #0000;
        animation: inherit;
        animation-duration: .5s;
        animation-direction: reverse;
    }

    .loader::after {
        margin: 20px;
    }

@keyframes l16 {
    100% {
        transform: rotate(1turn)
    }
}