#preloader {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    background-color: #E3E3E3;
    z-index: 999999;
}
#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
    text-align: center;
    font-size: 50px;
}
#preloader-title {
    margin-top: 47px;
}
.spinner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    font-size: 100px;
    width: 2em;
    height: 2em;
    margin: 0 auto;
    border-radius: 50%;
    background: #E3E3E3;
    box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2);
    background:-webkit-linear-gradient(#00a5e2 50%, #1C1C1C 50%), -webkit-linear-gradient(#1C1C1C 50%, #00a5e2 50%);
    background:-webkit-linear-gradient(#00a5e2 50%, #1C1C1C 50%), -webkit-linear-gradient(#1C1C1C 50%, #00a5e2 50%);
    background:linear-gradient(#00a5e2 50%, #1C1C1C 50%), linear-gradient(#1C1C1C 50%, #00a5e2 50%);
    background-size: 50% 100%, 50% 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-animation: mask 6s infinite alternate;
    animation: mask 6s infinite alternate;
}
.spinner:after {
    content: '';
    position: absolute;
    border: .90em solid #1C1C1C;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: inherit;
}
@-webkit-keyframes mask {
    0% { }
    25%  { -webkit-transform: rotate(270deg); }
    50%  { -webkit-transform: rotate( 90deg); }
    75%  { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@keyframes mask {
    0% { }
    25%  { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
    50%  { -webkit-transform: rotate( 90deg); transform: rotate( 90deg); }
    75%  { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
    100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}

img {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}