.content-loader{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    z-index: -1;
    opacity: 0;

    &.show{
        visibility: visible;
        z-index: 100;
        opacity: 1;
    }

    & .content-loader-icon{
        position:relative;
        width: 10rem;
        height:10rem;

        &::after,
        &::before{
            position:absolute;
            content:"";
            left:0;
            top:0;
            width: 10rem;
            height:10rem;
            border-color:  transparent #fff transparent  #fff ;
            border-radius: 30rem;
            border-width: .1rem;
            border-style: solid;
        }

        &::after{
            left:5%;
            top:5%;
            width: 9rem;
            height:9rem;
            border-color: #fff   transparent #fff  transparent;
            animation:afters 1s linear infinite; 
        }

        &::before{
            animation:befores 3s linear infinite; 
        }

        & img{
            border-radius: 30rem;
            width:7.5rem;
            animation:scaless 1.5s linear infinite; 
        }
    }
}

@keyframes befores {
    100%{
        transform: rotate(360deg);
    }
}

@keyframes afters {
    100%{
        transform: rotate(-360deg);
    }
}


@keyframes scales {
    0%, 10%, 100%{
        transform: scale(0.8);
    }
    85%{
        transform: scale(1);
    }
}