CSS3简单写个圆形进度条动画

圆圈转动完整代码

html

<div id="wrap">
    <div class="box-left">
        <div class="circle-left"></div>
    </div>
    <div class="box-right">
        <div class="circle-right"></div>
    </div>
</div>

css

#wrap{
  width: 200px;
  height: 200px;
  margin: 200px auto;
  position: relative;
  border-radius: 50%;
}
 
/*底部圆圈*/
#wrap::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border: 10px solid rgba(255,255,255,0.5);
  border-radius: 50%;
}
 
/*左右两个盒子里面各放着一个半圆圈，主要overflow*/
.box-left, .box-right{
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.box-left, .circle-left{
  left: 0;
}
.box-right, .ci