原理

• 外层一个大圆(pie)，
• 中间一个小圆(circle)，覆盖住大圆，形成圆环
• 左右各有半圆(left、right)，也被中间小圆覆盖，形成左右两个半圆环
• 左右半圆内有子左右半圆（left-deg，right-deg），用来旋转
• 在父左右半圆上面设置overflow：hidden，子左右半圆旋转，可实现圆环百分比效果

html

<div class="pie">
  <div class="circle"></div>
  <div class="left">
    <div class="left-deg"></div>
  </div>
  <div class="right">
    <div class="right-deg"></div>
  </div>
</div>

css

.pie {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #D8D8D8;
  position: relative;

}
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  background: white;
  border-radius: 50%;
}
.left, .right {
  width: 25px;
  height: 50px;
  float: left;
  overflow: hidden;
}
.left {
  border-radius: 50px 0 0 50px;
  
}
.right {
  border-radius: 0 50px 50px 0;

}
.left-deg, .right-deg {
  width: 25px;
  height: 50px;
  background: blue;
}
.left-deg {
  transform-origin: right center;
  transform: rotate(-180deg);
}
.right-deg {
  transform-origin: left center;
  transform: rotate(-90deg);
}

效果