.block{
    width: 100%;
    height: 100%;
    background: #34000C;
    position: absolute;
    top: 0;
    transition: all 0.5s;
}

/*------------------------------------------------------------------------------
Gear Loader  / prefixfree
---------------------------------------------------------------------------------*/


.gear{width: 80px;
    height: 80px;
    border-radius:10%;
    margin:80px auto;
    border:5px solid  #fff ;
    position: absolute;
    top: 45%;
    left: 45%;
    box-shadow:  0 10px 0 0 rgba(0, 0, 0, .1);
}

.gear:after{content:"";
    width: 100px;
    height: 100px;
    border-radius:100%;
    display:block;
    border:5px dashed  #fff ;
    position:absolute;
    top:-24px; left: -24px;
    box-shadow: inset 0px 0 0 20px #fff;
    transform:scale(.5) rotate(0deg);
    animation:gear 6s linear infinite;
}

.gear:before{content:"";
    width: 58px;
    height: 58px;
    border-radius:100%;
    display:block;
    border:5px dashed  #fff ;
    position:absolute;
    top:26px;
    right: -14px;
    box-shadow: inset 0px 0 0 10px #fff;
    transform:scale(.5) rotate(0deg);
    animation:gear2 4s linear infinite;
}

@keyframes gear {
    0%{transform:scale(.5) rotate(0deg);}
    100%{transform:scale(.5) rotate(360deg);}
}

@keyframes gear2 {
    0%{transform:scale(.5) rotate(0deg);}
    100%{transform:scale(.5)  rotate(-360deg);}
}