Imagem Loading Effect (CSS)

.box {
width:800px;
height:533px;
overflow:hidden;
position:absolute;
left:50%;
transform:translate(-50%);
}

#image {
width:100%;
position:absolute;
top:0;
left:0;
}

#layer {
width:100%;
height:533px;
background-color:white;
position:absolute;
top:0;
left:0;
}

#sp {
cursor:pointer;
width:60px;
height:60px;
background-color:red;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

#loader {
display:none;
width:300px;
height:300px;
border:30px solid rgba(0,0,0,0.1);
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-left:30px solid transparent;
border-right:30px solid transparent;
}

@keyframes rot {
100% { transform:translate(-50%,-50%)rotate(360deg); }
}