.spinner-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 3.5rem 0;
}

    .spinner-block .rect-spinner {
        position: relative;
        width: 2.5rem;
        height: 2.5rem;
    }

    .spinner-block .rect {
        --size: 12px;
        position: absolute;
        width: var(--size);
        aspect-ratio: 5/1;
        top: calc(var(--size) / 2);
        left: calc(var(--size) / 2);
        background-color: #161616;
        border-radius: 1.125rem;
        opacity: 0;
        -webkit-animation: animate-in;
        animation: animate-in;
        -webkit-animation-duration: 800ms;
        animation-duration: 800ms;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-fill-mode: alternate;
        animation-fill-mode: alternate;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .spinner-block p {
        margin-left: -5px;
    }

.rect:nth-of-type(0) {
    --degrees: 0 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(0 * 50ms);
    animation-delay: calc(0 * 50ms);
}

.rect:nth-of-type(1) {
    --degrees: 1 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(1 * 50ms);
    animation-delay: calc(1 * 50ms);
}

.rect:nth-of-type(2) {
    --degrees: 2 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(2 * 50ms);
    animation-delay: calc(2 * 50ms);
}

.rect:nth-of-type(3) {
    --degrees: 3 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(3 * 50ms);
    animation-delay: calc(3 * 50ms);
}

.rect:nth-of-type(4) {
    --degrees: 4 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(4 * 50ms);
    animation-delay: calc(4 * 50ms);
}

.rect:nth-of-type(5) {
    --degrees: 5 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(5 * 50ms);
    animation-delay: calc(5 * 50ms);
}

.rect:nth-of-type(6) {
    --degrees: 6 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(6 * 50ms);
    animation-delay: calc(6 * 50ms);
}

.rect:nth-of-type(7) {
    --degrees: 7 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(7 * 50ms);
    animation-delay: calc(7 * 50ms);
}

.rect:nth-of-type(8) {
    --degrees: 8 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(8 * 50ms);
    animation-delay: calc(8 * 50ms);
}

.rect:nth-of-type(9) {
    --degrees: 9 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(9 * 50ms);
    animation-delay: calc(9 * 50ms);
}

.rect:nth-of-type(10) {
    --degrees: 10 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(10 * 50ms);
    animation-delay: calc(10 * 50ms);
}

.rect:nth-of-type(11) {
    --degrees: 11 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(11 * 50ms);
    animation-delay: calc(11 * 50ms);
}

.rect:nth-of-type(12) {
    --degrees: 12 * 360deg / 12;
    -webkit-transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    transform: rotate(calc(var(--degrees))) translateX(1.125rem);
    -webkit-animation-delay: calc(12 * 50ms);
    animation-delay: calc(12 * 50ms);
}

@-webkit-keyframes animate-in {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes animate-in {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}