.spinner {
    width: 75px;
    height: 75px;
    display: grid;
}

.spinner::before,
.spinner::after {
    content: "";
    grid-area: 1/1;
    background: var(--c) 50% 0,
        var(--c) 50% 100%,
        var(--c) 100% 50%,
        var(--c) 0 50%;
    background-size: 13.4px 13.4px;
    background-repeat: no-repeat;
    animation: spinner-3hs4a3 1s infinite;
}

.spinner::before {
    --c: radial-gradient(farthest-side, #63c4e5 92%, #0000);
    margin: 4.5px;
    background-size: 9px 9px;
    animation-timing-function: linear;
}

.spinner::after {
    --c: radial-gradient(farthest-side, #63c4e5 92%, #0000);
}

@keyframes spinner-3hs4a3 {
    100% {
        transform: rotate(.5turn);
    }
}