:root {
    --page-loader-color: #496cad;
    --page-loader-size: 32px;
    --page-loader-wheel-size: 8px;
    --page-loader-speed: .5s;
    --page-loader-background-color: 221, 221, 211;
    --page-loader-opacity: .3;
}

[role="main"] {
    position: relative;
}

.page-loader {
    position: absolute;
    z-index: 2147483640;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    inset: 0;

    background: rgba(var(--page-loader-background-color), var(--page-loader-opacity));
}

body > .page-loader {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.page-loader .loading {
    display: flex;
    width: var(--page-loader-size);
    height: var(--page-loader-size);
    border-radius: 100%;
    border: var(--page-loader-wheel-size) solid var(--page-loader-color);
    border-right-color: transparent;
    animation: spin var(--page-loader-speed) infinite linear;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}


.shadow-pulse-loader {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 7px auto;
    position: relative;
    background: #FFF;
    box-shadow: -12px 0 #FFF, 12px 0 #FFF;
    box-sizing: border-box;
    animation: shadowPulse 2s linear infinite;
}

@keyframes shadowPulse {
    33% {
        background: #FFF;
        box-shadow: -12px 0 #FF3D00, 12px 0 #FFF;
    }
    66% {
        background: #FF3D00;
        box-shadow: -12px 0 #FFF, 12px 0 #FFF;
    }
    100% {
        background: #FFF;
        box-shadow: -12px 0 #FFF, 12px 0 #FF3D00;
    }
}