A Pen by CHESMER.
body {
background-color: #eee;
}
.loading {
margin: 10% auto;
border-bottom: 6px solid #fff;
border-left: 6px solid #fff;
border-right: 6px solid #c30;
border-top: 6px solid #c30;
border-radius: 100%;
height: 125px;
width: 125px;
-webkit-animation: spin .6s infinite linear;
-moz-animation: spin .6s infinite linear;
-ms-animation: spin .6s infinite linear;
-o-animation: spin .6s infinite linear;
animation: spin .6s infinite linear;
}
@keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes "spin" {
from {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-o-keyframes "spin" {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
transform: rotate(359deg);
}
}
<div class="loading"></div>