.loader & {
    background: @stormtrooper;
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    
    .loader__spinner{
        color: @smart;
        font-size: 1em;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        text-indent: -9999rem;
        transform: translate(-50%, -50%) translateZ(0);
        animation: loader 1.3s infinite linear;
    }
}
  
@keyframes loader {
    0%,
    100% {
        box-shadow: 0 -3rem 0 0.2rem, 2rem -2rem 0 0rem, 3rem 0 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 -1rem, -3rem 0 0 -1rem, -2rem -2rem 0 0;
    }
    12.5% {
        box-shadow: 0 -3rem 0 0, 2rem -2rem 0 0.2rem, 3rem 0 0 0, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 -1rem, -3rem 0 0 -1rem, -2rem -2rem 0 -1rem;
    }
    25% {
        box-shadow: 0 -3rem 0 -0.5rem, 2rem -2rem 0 0, 3rem 0 0 0.2rem, 2rem 2rem 0 0, 0 3rem 0 -1rem, -2rem 2rem 0 -1rem, -3rem 0 0 -1rem, -2rem -2rem 0 -1rem;
    }
    37.5% {
        box-shadow: 0 -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0rem 0 0, 2rem 2rem 0 0.2rem, 0 3rem 0 0rem, -2rem 2rem 0 -1rem, -3rem 0rem 0 -1rem, -2rem -2rem 0 -1rem;
    }
    50% {
        box-shadow: 0 -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0 0 -1rem, 2rem 2rem 0 0rem, 0 3rem 0 0.2rem, -2rem 2rem 0 0, -3rem 0rem 0 -1rem, -2rem -2rem 0 -1rem;
    }
    62.5% {
        box-shadow: 0 -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 0, -2rem 2rem 0 0.2rem, -3rem 0 0 0, -2rem -2rem 0 -1rem;
    }
    75% {
        box-shadow: 0rem -3rem 0 -1rem, 2rem -2rem 0 -1rem, 3rem 0rem 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 0, -3rem 0rem 0 0.2rem, -2rem -2rem 0 0;
    }
    87.5% {
        box-shadow: 0rem -3rem 0 0, 2rem -2rem 0 -1rem, 3rem 0 0 -1rem, 2rem 2rem 0 -1rem, 0 3rem 0 -1rem, -2rem 2rem 0 0, -3rem 0rem 0 0, -2rem -2rem 0 0.2rem;
    }
}