.loader
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
%div
View Compiled
@import "compass/css3";
* {
border: 0;
padding: 0;
border: 0;
}
html, body {
min-height: 100%;
}
body {
font-size: 1em;
background: radial-gradient(#444,#000);
overflow: hidden;
}
.loader {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10em;
height: 10em;
border-radius: 100%;
div {
height: 100%;
width: 100%;
border-radius: 100%;
box-sizing: border-box;
border-bottom: 0.2em solid grey;
border-top: 0.2em solid grey;
border-left: 0.2em solid aqua;
border-right: 0.2em solid aqua;
animation: spin 10s infinite linear;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.