SOURCE

<div class='circle-container'>
    <div class="circle-item">
        <div class="circle-left-wrap">
            <div class="left" style="transform: rotate(0deg)"></div>
        </div>
        <div class="circle-right-wrap">
            <div class="right" style="transform: rotate(10deg)"></div>
        </div>
        <div class='mask' name="总完成度" count="90%"></div>
    </div>    
</div>

<div class='circle-container'>
    <div class="circle-item">
        <div class="circle-left-wrap">
            <div class="left" style="transform: rotate(180deg)"></div>
        </div>
        <div class="circle-right-wrap">
            <div class="right" style="transform: rotate(180deg)"></div>
        </div>
        <div class='mask' name="总完成度" count="100%"></div>
    </div>    
</div>

.circle-container{
  position: relative;
  float: left;
  width: 120px;
  height: 120px;
  color:#fff;
}
.circle-item{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #00BF80;
}
.circle-left-wrap, .circle-right-wrap{
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 100px;
  overflow: hidden;
}
.circle-right-wrap{
  left: 50px;
}
.left, .right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ddd;
  /* z-index:2; */
}
.left{
  clip: rect(0, 50px, auto, 0);
}
.right{
  clip: rect(0, auto, auto, 50px);
  left: -50px;
}
.mask{
  position: absolute;
  top: 5px;
  left:  5px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #35436E;
}
.mask::before {
  content:attr(count);
  position:absolute;
  top:20%;
  left:50%;
  transform:translateX(-50%);
  font-family: "DINPro-Medium";
  font-size: 20px;
}
.mask::after {
  content:attr(name);
  position:absolute;
  display:block;
  top:60%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100px;
  text-align:center;
  opacity: 0.6;
  font-family: "PingFangSC-Regular";
  font-size: 10px;
  color: #F4F6F8;
}