Html 剪辑路径，如何创建圆形进度条？

我已经看到了很多创建循环进度条的解决方案。它们看起来都非常长而且复杂。我想创建一个非常简单的一个，只需在两个圆的顶部绘制两个圆，并剪切外部圆的一部分，以便创建一个进度条的外观低于100%

我的HTML

    <div class="outter">
      <div class="inner"></div>
    </div>

---

现在我遇到的问题是使用剪辑路径。从文档中，我想不出如何剪裁outter圆并创建进度条的效果。有什么建议吗？

clip css操作符被标记为不推荐使用，并被clip path替换，而clip path又不完全受IE的支持

使用clip

。进度圈{
字体大小：20px；
利润率：20px；
位置：相对位置；
/*这样孩子们就可以被绝对定位*/
填充：0；
宽度：5em；
身高：5公分；
背景色：#F2E9E1；
边界半径：50%；
线高：5em；
}
.进展周期：之后{
边界：无；
位置：绝对位置；
顶部：0.35em；
左：0.35em；
文本对齐：居中；
显示：块；
边界半径：50%；
宽度：4.3em；
高度：4.3em；
背景色：白色；
内容：“；
}
/*控件中的文本*/
.进度循环跨度{
位置：绝对位置；
线高：5em；
宽度：5em；
文本对齐：居中；
显示：块；
颜色：#08a1db；
z指数：2；
}
.左半剪{
/*圆*/
边界半径：50%；
宽度：5em；
身高：5公分；
位置：绝对位置；
/*需要进行剪裁*/
剪辑：rect（0,5em，5em，2.5em）；
/*剪辑整个左半部分*/
}
/*当p>50时，不要剪辑左半部分*/
.progress-circle.Over 50.左半剪{
剪辑：rect（自动，自动，自动，自动）；
}
.价值条{
/*这是一个叠加的正方形，用边界半径做成圆形，
然后将其剪切为仅显示左半部分，然后顺时针旋转
以退出外部剪裁路径*/
位置：绝对位置；
/*需要进行剪裁*/
剪辑：rect（0,2.5em，5em，0）；
宽度：5em；
身高：5公分；
边界半径：50%；
边框：0.45em实心#08a1db；
/*边框为0.35，但将其变大会删除视觉瑕疵*/
/*背景色：#4D642D*/
/*用于调试*/
框大小：边框框；
}
/*当值超过50%时，进度条填充整个右半部分*/
.前进圈.超过50.前50巴{
/*前50%的进度条，填充整个右半部分*/
位置：绝对位置；
/*需要进行剪裁*/
剪辑：rect（0,5em，5em，2.5em）；
背景色：#08a1db；
边界半径：50%；
宽度：5em；
身高：5公分；
}
.进度圈：未（.50以上）。前50巴{
显示：无；
}
/*进度条旋转位置*/
.progress-circle.p0.值栏{
显示：无；
}
.progress-circle.p1.值栏{
变换：旋转（4deg）；
}
.progress-circle.p2.值栏{
变换：旋转（7度）；
}
.progress-circle.p3.值栏{
变换：旋转（11度）；
}
.progress-circle.p4.值栏{
变换：旋转（14度）；
}
.progress-circle.p5.值栏{
变换：旋转（18度）；
}
.progress-circle.p6.值栏{
变换：旋转（22度）；
}
.progress-circle.p7.值栏{
变换：旋转（25度）；
}
.progress-circle.p8.值栏{
变换：旋转（29度）；
}
.progress-circle.p9.值栏{
变换：旋转（32度）；
}
.progress-circle.p10.值栏{
变换：旋转（36度）；
}
.progress-circle.p11.值栏{
变换：旋转（40度）；
}
.progress-circle.p12.值栏{
变换：旋转（43度）；
}
.progress-circle.p13.值栏{
变换：旋转（47度）；
}
.progress-circle.p14.值栏{
变换：旋转（50度）；
}
.progress-circle.p15.值栏{
变换：旋转（54度）；
}
.progress-circle.p16.值栏{
变换：旋转（58度）；
}
.progress-circle.p17.值栏{
变换：旋转（61度）；
}
.progress-circle.p18.值栏{
变换：旋转（65度）；
}
.progress-circle.p19.值栏{
变换：旋转（68度）；
}
.progress-circle.p20.值栏{
变换：旋转（72度）；
}
.progress-circle.p21.值栏{
变换：旋转（76度）；
}
.progress-circle.p22.值栏{
变换：旋转（79度）；
}
.progress-circle.p23.值栏{
变换：旋转（83度）；
}
.progress-circle.p24.值栏{
变换：旋转（86度）；
}
.progress-circle.p25.值栏{
变换：旋转（90度）；
}
.progress-circle.p26.值栏{
变换：旋转（94度）；
}
.progress-circle.p27.值栏{
变换：旋转（97度）；
}
.progress-circle.p28.值栏{
变换：旋转（101度）；
}
.progress-circle.p29.值栏{
变换：旋转（104度）；
}
.progress-circle.p30.值栏{
变换：旋转（108度）；
}
.progress-circle.p31.值栏{
变换：旋转（112度）；
}
.progress-circle.p32.值栏{
变换：旋转（115度）；
}
.progress-circle.p33.值栏{
变换：旋转（119度）；
}
.progress-circle.p34.值栏{
变换：旋转（122度）；
}
.progress-circle.p35.值栏{
变换：旋转（126度）；
}
.progress-circle.p36.值栏{
变换：旋转（130度）；
}
.progress-circle.p37.值栏{
变换：旋转（133度）；
}
.progress-circle.p38.值栏{
变换：旋转（137度）；
}
.progress-circle.p39.值栏{
变换：旋转（140度）；
}
.progress-circle.p40.值栏{
变换：旋转（144度）；
}
.progress-circle.p41.值栏{
变换：旋转（148度）；
}
.progress-circle.p42.值栏{
变换：旋转（151度）；
}
.progress-circle.p43.值栏{
变换：旋转（155度）；
}
.progress-circle.p44.值栏{
变换：旋转（158度）；
}
.progress-circle.p45.值栏{
变换：旋转（162度）；
}
.progress-circle.p46.值栏{
变换：旋转（166度）；
}
.progress-circle.p47.值栏{
变换：旋转（169度）；
}
.progress-circle.p48.值栏{
变换：旋转（173度）；
}
.progress-circle.p49.值栏{
变换：旋转（176度）；
}
.progress-circle.p50.值栏{
变换：旋转（180度）；
}
.进展情况
.outter {
  background-color: #08a1db;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

.inner {
  background-color: white;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -42px 0 0 -42px;
}