CSS 画一个简单的圆

.wrap{width: 486px;height: 486px;border-radius: 100%;position: relative;margin: 0 auto;overflow: hidden;}
.wrapper{ width: 243px;
height: 486px;
position: absolute;
top:0;
overflow: hidden;}
.circleProgress_wrapper{
width: 486px;
height: 486px;
margin: 0 auto;
position: relative;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 486px;
height: 486px;
border:1px solid transparent;
border-radius: 50%;
position: absolute;
border-left:1px solid transparent;
border-bottom:1px solid transparent;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:1px solid #00d196;
border-right:1px solid #00d196;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear;
}
.leftcircle{
border-bottom:1px solid #00d196;
border-left:1px solid #00d196;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(-135deg);
}
50%,100%{
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%,50%{
-webkit-transform: rotate(-135deg);
}
100%{
-webkit-transform: rotate(45deg);
}
}

<div class="wrap">
<div class="circleProgress_wrapper">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
</div>