.loader img {
    margin: auto;
    max-width: 100%;
    display: block;
    opacity: 0.4;
    position: relative;
    top: 40%;
}
.loader {
position : fixed;
z-index: 9999;
background : url('images/gif-load.gif') 50% 65% no-repeat #222a2d;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
cursor : wait;
background-size: 6%;
}

@media(max-width: 1200px) {
 .loader {
    background-size: 10%;
    }   
}
.spinner {
    display: inline-block;
    opacity: 0;
    width: 0;
    -webkit-transition: opacity 0.25s, width 0.25s;
    -moz-transition: opacity 0.25s, width 0.25s;
    -o-transition: opacity 0.25s, width 0.25s;
    transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {
    cursor:progress;
}

.has-spinner.active .spinner {
    opacity: 1;
    width: auto;
}

.has-spinner.btn.active .spinner {
    min-width: 10px;
}