body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.loader {
    width: 10em;
    height: 10em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5em;
    transform: rotate(45deg);
}

.loader span {
    background-color: var(--color);
    animation: blinking 2s var(--delay) ease-in-out infinite;
    animation-fill-mode: backwards;
}

.loader span:nth-child(2n+2) {--color: gold;}
.loader span:nth-child(4n+3) {--color: tomato;}
.loader span:nth-child(4n+1) {--color: limegreen;}

.loader span:nth-child(7) {--delay: 0s;}
.loader span:nth-child(4n+4) {--delay: 0.2s;}
.loader span:nth-child(4n+1) {--delay: 0.4s;}
.loader span:nth-child(4n+2) {--delay: 0.6s;}
.loader span:nth-child(3) {--delay: 0.8s;}

@keyframes blinking {
    0%, 20% {transform: rotate(0deg) scale(0);}
    40%, 80% {transform: rotate(1turn) scale(1);}
    100% {transform: rotate(2turn) scale(0);}
}