/* Анимации вращения */
@keyframes spin360 {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spin360rev {
    to {
        transform: rotate(-360deg)
    }
}

/* Лоадер */
.loader {
    width: 150px;
    height: 150px;
    position: relative
}

.loader-ring {
    position: absolute;
    border: 5px solid transparent;
    border-radius: 50%;
}
    /* Скорости и направления */
    .loader-ring.outer {
        animation: spin360 2s linear infinite;
        border-top-color: #fb923c;
        inset: 0
    }

    .loader-ring.mid {
        animation: spin360rev 3s linear infinite;
        border-top-color: #f97316;
        inset: 12px
    }

    .loader-ring.inner {
        animation: spin360 5s linear infinite;
        border-top-color: #ea580c;
        inset: 24px
    }

/* Сияние — чуть медленнее */
.loader-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    filter: blur(18px);
    background: radial-gradient(closest-side,rgba(251,146,60,.35),rgba(251,146,60,.15) 60%,transparent 85%);
}

/* Текст под лоадером */
.loader-caption {
    position: absolute;
    bottom: -42px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ea580c
}