/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
.with-loader{
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 1;
}
 .with-loader .loader{
     background-color: rgba(255,255,255,0.5);
     height: 100%;
     position: absolute;
     width: 100%;
     z-index: 999;
}
 .lds-ring {
     display: inline-block;
     position: relative;
     width: 64px;
     height: 64px;
     position:absolute;
    /*it can be fixed too*/
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
}
 .lds-ring div {
     box-sizing: border-box;
     display: block;
     position: absolute;
     width: 51px;
     height: 51px;
     margin: 6px;
     border: 6px solid #666666;
     border-radius: 50%;
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
     border-color: #666666 transparent transparent transparent;
}
 .lds-ring div:nth-child(1) {
     animation-delay: -0.45s;
}
 .lds-ring div:nth-child(2) {
     animation-delay: -0.3s;
}
 .lds-ring div:nth-child(3) {
     animation-delay: -0.15s;
}
 @keyframes lds-ring {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}