<div id="loading"></div>
/* Animation */
@-webkit-keyframes loading {
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes loading {
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes loading {
to { -ms-transform: rotate(360deg); }
}
@keyframes loading {
to { transform: rotate(360deg); }
}
/* Loader (*/
#loading {
width: 40px;
height: 40px;
border-radius: 50%;
background-image: linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
background-image: -o-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, #FFFFFF),
color-stop(0.5, #00FFFF)
);
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-ms-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
}
/* Just page styling */
body{
background: #191919;
}
div {
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -20px;
}
This Pen doesn't use any external CSS resources.