/* Common Loader CSS */

@keyframes hideLoader{
    0%{ width: 100%; height: 100%; }
    100%{ width: 0; height: 0; }
}
body > div.loader{
        position: fixed;
        background: white;
        width: 100%;
        height: 100%;
        z-index: 1071;
        opacity: 0;
        transition: opacity .5s ease;
        overflow: hidden;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body:not(.loaded) > div.loader{
        opacity: 1;
    }
    body:not(.loaded){
        overflow: hidden;
    }
body.loaded > div.loader{
    animation: hideLoader .5s linear .5s forwards;
}

/* Square Animation */
.loading-animation{
    width: 20px;
    height: 20px;
    border:1px  rgba(50,50,50,1) solid;
    margin: 36px auto;
    position: relative;
    -webkit-animation: fill_color 5s linear infinite;
       -moz-animation: fill_color 5s linear infinite;
            animation: fill_color 5s linear infinite;
}
.loading-animation:after{
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background-color: rgba(50,50,50,1);
    top: -8px;
    left: 0px;
    -webkit-animation: square_check 1s ease-in-out infinite;
       -moz-animation: square_check 1s ease-in-out infinite;
            animation: square_check 1s ease-in-out infinite;
}

@keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}

@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(50,50,50,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(50,50,50,1);}
}