<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>loader</title>
</head>
<body>
</body>
<div id="outer-ring">
<div id="inner-ring">
</div>
</div>
</html>
#outer-ring {
height: 200px;
width: 200px;
border: 10px solid blue;
border-radius: 100%;
-webkit-transform:rotate(45deg);
-webkit-animation-duration: 10s;
-webkit-animation-name: outer;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: step-start;
-webkit-animation-direction:alternate;
}
#inner-ring {
margin: -10px 0 0 -10px;
height: 200px;
width: 200px;
border: 10px solid transparent;
border-radius: 100%;
-webkit-animation-duration: 10s;
-webkit-animation-name: inner;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-direction:alternate;
}
@-webkit-keyframes inner {
from {
-webkit-transform:rotate(0deg);
border-top-color: blue;
}
25% {
border-top-color: blue;
-webkit-transform:rotate(90deg);
}
50% {
border-top-color: blue;
-webkit-transform:rotate(180deg);
-webkit-animation-timing-function: step-start;
}
50.001% {
border-top-color: red;
-webkit-transition-timing-function: linear;
-webkit-transform:rotate(90deg);
}
75% {
border-top-color: red;
-webkit-transform:rotate(180deg);
}
to {
border-top-color: red;
-webkit-transform:rotate(270deg);
}
}
@-webkit-keyframes outer {
from {
border-top-color: blue;
border-left-color: blue;
border-bottom-color: blue;
border-right-color: blue;
}
25% {
border-top-color: red;
border-left-color: blue;
border-bottom-color: blue;
border-right-color: blue;
}
75% {
border-top-color: red;
border-left-color: blue;
border-bottom-color: blue;
border-right-color: red;
}
to {
border-top-color: red;
border-left-color: blue;
border-bottom-color: red;
border-right-color: red;
}
}