Javascript 如何在css中获得覆盖x%div的圆形边框？

我需要做一个进步div，它是一个内部有百分比的小球。它有一个边界，边界应该只覆盖百分比的数量。如以下示例所示：

---

我想知道如何让这个例子用css或javascript实现。

最干净的方法是使用SVG笔划

创建一个SVG圆

将其笔划数组设置为等于其周长（2*Pi*半径）

在0和stroke dasharray之间动态更改笔划dashoffset以部分填充饼图

下面是一个关于

这是我做的一个简单的

身体{
背景颜色：灰色；
}
svg{
宽度：250px；
高度：250px；
利润率：50像素；
}
圈{
填充物：白色；
笔画：青色；
笔划宽度：20px；
/*有趣的部分*/
行程：785px；
行程偏移：392.5px；
过渡：所有300毫秒；
}
var circle=document.querySelector（'circle'）；
var circ=785；//圆周
函数变换分数（fr）{
circle.style.setProperty（'stroke-dashoffset'，（1-fr）*circ+'px'）；
}

请阅读“”和“”指南，以了解如何编写一个可能更容易获得答案的好问题。请参阅：我投票将此问题作为主题外的问题结束，因为堆栈溢出不是一种代码编写服务。因此，您应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的东西，清楚地解释什么不起作用，并提供一个解决方案。也许它在Firefox中不起作用。。。只有那个滑块，移动它什么也不做…现在圆在那里，但它是一个完整的圆，移动滑块仍然什么也不做。。。（顺便说一句：我没有投反对票）请不要回答离题的问题。回答问得好的问题并非所有问题都可以或应该在这里回答。为自己省去一些挫败感，避免试图回答那些期望您为他们编写代码的问题，而不要试图在他们自己的第一时间这样做。堆栈溢出不是代码编写服务@罗伯，我很好奇，在事先不知道这个特殊技巧的情况下，OP会如何尝试解决方案？他们会用实心边框或其他东西来模仿别人吗？我会重复我在他的问题下面的评论中所说的。因此，您应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的内容，清楚地解释什么不起作用，并在问题本身中提供一个答案。认为堆栈溢出与其他网站和论坛一样是错误的。特别是，请阅读“研究”蓝色链接。

<section>
  <svg>
    <circle></circle>
  </svg>
  <input type="range" min="0" max="1" step=".01" value=".5"
        oninput="changeFraction(this.value)">
</section>

<style>
  body {
  background-color: gray; 
}

svg {
  width: 250px;
  height: 250px;
  margin: 50px;
}

circle {
  fill: white;
  stroke: cyan ;
  stroke-width: 20px;

  /* interesting part */
  stroke-dasharray: 785px;
  stroke-dashoffset: 392.5px;
  transition: all 300ms;
}
</style>

<script>
var circle = document.querySelector('circle');
var circ = 785; // circumference
function changeFraction(fr) {
  circle.style.setProperty('stroke-dashoffset', (1 - fr)*circ+'px');
}
</script>