.navbar {

    &:after {
        @include tr(all .3s);
        content: ' ';
        height: 5px;
        width: 100%;
        left: 250px;
        right: 0px;
        bottom: -5px;
        background: $yellow-color;
        position: absolute;
        animation: linear spinner-navbar 1s infinite;
        transform-style: preserve-3d;
        @include bs(0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2));
    
        body.ready & {
           animation: none;
           width: 0%;
        }
    }
}
    
.loading {

    &:after {
    }
}
.loading {
    position: relative;
    min-height: 150px;
    transition: 1s linear opacity;
    opacity: 1;

    > .loading-text {
        //ab(); l(50%); t(50%); mt(10); ts(translateX(-50%));
    }

    &:before, &:after {
        content: " ";
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px;
        z-index: 10000002;
        width: 100px;
        height: 100px;
        background-image: url(../img/loading.png) ;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        animation: fadeIn 0.75s linear, spin 0.8s infinite linear;
        pointer-events: none;

        
        // border: 6px double $red-color;
        // border-left-width: 6px !important;
        // border-top-width: 6px !important;
        // border-radius: 50% 50% 50% 50%;
        // border-left: 6px solid $teal-color;
    }

    &:before {
        animation: fadeIn .75s linear, spin 3s infinite linear;
        opacity: 0.7;

    }
    //     content: " ";
    //     position: absolute;
    //     left: 0;
    //     top:  0;
    //     bottom: 0;
    //     right: 0;
    //     z-index: 10000001;
    //     background: rgba(white, 0.5);
    //     display: inline-block;
    //     animation: fadeIn 0.25s linear;
    //     // @include bs(0px 0px 80px 50px white inset);
    // }
}


body.loading {
    &:after, &:before {
        position: fixed;
    }
    &:before {
    }
    &.has-modal {
        &:after {
            z-index: 111002;
        }
    }
}