<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 400px;
height: 400px;
margin: auto;
border: 1px solid black;
border-bottom: 200px solid black;
border-radius: 50%;
transform-origin: 50% 50%;
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
div:before {
position: absolute;
top: 100px;
box-sizing: border-box;
width: 199px;
height: 199px;
content: '';
border: 75px solid black;
border-radius: 50%;
background: white;
}
div:after {
position: absolute;
top: 100px;
right: 0;
box-sizing: border-box;
width: 199px;
height: 199px;
content: '';
border: 75px solid white;
border-radius: 50%;
background: black;
}
@keyframes rotate {
form { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
