@keyframes loading-rotate-1 {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes loading-rotate-2 {
    0% {
        transform: rotate(360deg)
    }
    to {
        transform: rotate(0)
    }
}

.loading-rotate {
    position: absolute;
    border-top: 3px solid #b9c4d9
}

.loading-run-1 {
    border-radius: 320px;
    top: calc(50% - 160px);
    left: calc(50% - 160px);
    width: 320px;
    height: 320px;
    animation: loading-rotate-2 2s linear infinite
}

.loading-run-2 {
    border-radius: 340px;
    top: calc(50% - 170px);
    left: calc(50% - 170px);
    width: 340px;
    height: 340px;
    animation: loading-rotate-1 1.8s linear infinite
}

.loading-run-3 {
    border-radius: 360px;
    top: calc(50% - 180px);
    left: calc(50% - 180px);
    width: 360px;
    height: 360px;
    animation: loading-rotate-2 1.6s linear infinite
}

.loading-run-4 {
    border-radius: 380px;
    top: calc(50% - 190px);
    left: calc(50% - 190px);
    width: 380px;
    height: 380px;
    animation: loading-rotate-1 1.4s linear infinite
}

.loading-run-5 {
    border-radius: 400px;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    width: 400px;
    height: 400px;
    animation: loading-rotate-2 1.2s linear infinite
}

.loading-text {
    position: absolute;
    width: 400px;
    height: 400px;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    color: #1d39c4;
    display: flex;
    font-weight: 700;
    font-size: 20px;
    justify-content: center;
    align-items: center
}