#preloader{position:fixed;left:0;top:0;width:100%;height:100%;overflow: hidden;display: table;text-align:center;z-index: 1051;}
.loader{ display:table-cell; vertical-align:middle; position:relative; width:200px; height:200px; } 
.loader-icon {width: 100px; height: 100px; border: 1px solid #ffb101; border-right-color: transparent; border-left-color: transparent; border-radius: 50%; position: relative; animation: loader-rotate 1s linear infinite; margin: 0 auto;z-index: 1; } 
.loader-icon:before, .loader-icon:after {content: ''; display: block; position: absolute; border-radius: 50%; border: .1em solid transparent; border-bottom-color: currentcolor; top: 0; left: 0; -webkit-animation: 3s loader-rotate linear infinite; animation: 3s loader-rotate linear infinite; } 
.loader-icon:before {width: 80px; height: 80px; border: 1px solid #000000; border-right-color: #eee; border-right-color: transparent; border-left-color: transparent; margin: 10px; } 
.row.loader:after {content: "";background: rgba(0,0,0,0.5);width: 100%;height: 100%;position: absolute;top: 0;left: 0; } 
.loader-icon:after {width: 60px; height: 60px; margin: 20px; border: 1px solid #ffb101; border-left-color: transparent; border-right-color: transparent; animation-delay: .5s; } 
@keyframes loader-rotate{ 0%{ transform:rotate(0) } 100%{ transform:rotate(360deg) } }