CSS
.nm-spinner {
width: 200px;
height: 200px;
display: inline-block;
border-radius: 100%;
background: url(http://f.cl.ly/items/3w2q2f1j0R1A2e1P3J32/nm_spinner.gif) 0 0 repeat-y;
background-size: 100% 100%;
-webkit-animation: rotate 2s infinite linear;
}
.nm-spinner::after {
content: '';
display: block;
width: 86%;
height: 86%;
margin: 7%;
background: #fff;
border-radius: 100%;
}
.nm-spinner.dark::after {
background: #1F1A1D;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
body {
background: #1F1A1D;
}
*,
::after,
::before {
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
}
body::before {
height: 100%;
content: '';
width: 0;
background: red;
vertical-align: middle;
display: inline-block;
}
