.loader {
    display: none;

    position: absolute;
    height: 1rem;
    width: 1rem;
    transform: translateX(-50%) translateY(-50%);

    left: 51.5%;
    margin-top: 4.5px;
}

.block {
    height: 2rem;
    width: 2rem;
}

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

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

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

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

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

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

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

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

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

@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);
    }
}