<style type="text/css">
#allan {
width: 0px;
height: 400px;
position:relative;margin:150px auto;
border-left: 200px solid #000;
border-right: 200px solid #f2f2f2;
border-radius: 200%;
box-shadow:0 0 30px #555;
position: relative;
-webkit-animation: "allan" 3s infinite linear;
}
#allan:before {
content: '';
position: relative;
display: block;
width: 80px;
height: 80px;
border: 60px solid #000;
border-radius: 110%;
background-color: #f2f2f2;
margin-left: -100px;
}
#allan:after {
content: '';
position: relative;
display: block;
width: 80px;
height: 80px;
border: 60px solid #f2f2f2;
border-radius: 110%;
background-color: #000;
margin-left: -100px;
}
@-webkit-keyframes "allan"{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
</style>
<div id="allan"> </div>
