body {
    background: #0ca3d2;
}

.example {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 2rem;
    width: 2rem;
    transform: translateX(-50%) translateY(-50%); 
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    width: 2rem;

}

.block {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    width: 2rem;
    
}

@keyframes move {
    0% {
        transform: rotate(0) scale(1);
        animation-timing-function: ease-in;
    }
    10% {
        transform: rotate(90deg) scale(0);
    }
    50% {
        transform: rotate(90deg) scale(0);
        animation-timing-function: ease-out;
    }
    60% {
        transform: rotate(180deg) scale(1);
    }
    100% {
        transform: rotate(180deg) scale(1);
    }
}

.block .item {
    position: absolute;
    height: 2rem;
    width: 2rem;
    background: #fff;
    animation: move 2s linear infinite;
}

.block .item:nth-of-type(1) {
    top: -2rem;
    left: -2rem;
    animation-delay: calc(-7 * 2s / 8);
}

.block .item:nth-of-type(2) {
    top: -2rem;
    left: 0;
    animation-delay: calc(-6 * 2s / 8);
}

.block .item:nth-of-type(3) {
    top: -2rem;
    left: 2rem;
    animation-delay: calc(-5 * 2s / 8);
}

.block .item:nth-of-type(4) {
    top: 0;
    left: 2rem;
    animation-delay: calc(-4 * 2s / 8);
}

.block .item:nth-of-type(5) {
    top: 2rem;
    left: 2rem;
    animation-delay: calc(-3 * 2s / 8);
}

.block .item:nth-of-type(6) {
    top: 2rem;
    left: 0;
    animation-delay: calc(-2 * 2s / 8);
}

.block .item:nth-of-type(7) {
    top: 2rem;
    left: -2rem;
    animation-delay: calc(-1 * 2s / 8);
}
  
.block .item:nth-of-type(8) {
    top: 0;
    left: -2rem;
    animation-delay: calc(0 * 2s / 8);
}