<body>
<div id="loader">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</body>
@keyframes example {
0% {
-webkit-transform: rotate(0deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg);
/* IE 9 */
transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
#loader {
position:relative;
top: 50px;
left : 50px;
}
#line1 {
float: left;
display: inline;
border: 3px solid transparent;
border-top-color: blue;
border-radius: 50%;
width: 110px;
height: 110px;
position: absolute;
animation: example 3s linear infinite;
}
#line2 {
border: 3px solid transparent;
border-top-color: red;
border-radius: 50%;
width: 95px;
height: 95px;
position: absolute;
top: 10px;
left: 7px;
float: left;
display: inline;
animation: example 5s linear infinite;
}
#line3 {
border: 3px solid transparent;
border-top-color: #08F525;
border-radius: 50%;
width: 80px;
height: 80px;
position: absolute;
top: 20px;
left: 14px;
float: left;
display: inline;
animation: example 2s linear infinite;
}