@keyframes spinner-bg {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}
@keyframes spinner-icon {
    to { transform: rotate(360deg); }
}

.spinner-on {
    position: relative;
    min-height: 45px;
}
.spinner-on::before {
    content: '';
    position: absolute;
    z-index: 10;
    inset: 0;
    background-color: rgba(255,255,255,.7);
    border-radius: inherit;
    animation: 2s linear infinite spinner-bg;
}
.spinner-on::after {
    content: '';
    position: absolute;
    z-index: 11;
    inset: 0;
    display: block;
    margin: auto;
    width: 45px;
    height: 45px;
    border: 0.25em solid #2c4c77;
    border-right-color: transparent;
    border-radius: 50%;
    animation: .75s linear infinite spinner-icon;
}
body.spinner-on::after {
    position: fixed;
}