#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;

    #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        margin: -50px 0 0 -50px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #3d3d3d;
        z-index: 1001;
        -webkit-animation: spin 2s linear infinite; 
        animation: spin 2s linear infinite; 
        &:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #696969;
            -webkit-animation: spin 3s linear infinite; 
            animation: spin 3s linear infinite; 
        }
        &:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #999999;
            -webkit-animation: spin 1.5s linear infinite; 
            animation: spin 1.5s linear infinite;     
        }
    }
    
    .loader-canvas {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: #ebebeb;
        z-index: 1000;
    }
    
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  
        -ms-transform: rotate(0deg);  
        transform: rotate(0deg);  
    }
    100% {
        -webkit-transform: rotate(360deg);  
        -ms-transform: rotate(360deg);  
        transform: rotate(360deg);  
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  
        -ms-transform: rotate(0deg);  
        transform: rotate(0deg);  
    }
    100% {
        -webkit-transform: rotate(360deg);  
        -ms-transform: rotate(360deg);  
        transform: rotate(360deg);  
    }
}

// Loaded
.loaded {
    #loader-wrapper {
        visibility: hidden;
        .loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out; 
            transition: all 0.3s ease-out;
        }
        .loader-canvas {
            opacity: 0;
            -webkit-transition: all 0.6s ease-out; 
            transition: all 0.3s ease-out;
        }
    }
}


// Fallback
.no-js #loader-wrapper {
    display: none;
}