CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
transform: translate3d(0, 0, 0);
background-color: #d35400;
}
.loader {
font-size: 30vmin;
width: 1em;
height: 1em;
border: 0.1em solid #ecf0f1;
border-radius: 1em;
position: relative;
}
.loader:before {
content: "";
position: absolute;
top: -0.01em;
left: -0.01em;
width: .825em;
height: .825em;
border-top: 0.15em solid #ecf0f1;
border-radius: 1em;
animation: spin 1s infinite linear;
}
@keyframes spin {
to { transform: rotate(360deg); }
}