Jquery 在圆圈中制作进度条

我需要为一个项目制作一个“健康”进度条，其中绿色表示填充的数据，红色表示空数据。当红色部分为50%时，我得到了一个很好的圆，但一旦该值变为其他值，边界半径就会变得一团糟

以下是我目前的情况：

HTML:

progressRed类的width值在Jquery中将是动态的，也许我也可以更改边界半径，使其再次适合progressWrap？我只是不知道如何计算在这种情况下所需的边界半径

---

非常感谢您的帮助

红色部分不需要边界半径。因为它完全被包裹在绿色的圆圈中，所以更容易让它保持正方形，并对父对象隐藏溢出

在父零件（绿色）上设置溢出：隐藏，并从红色中删除半径

---

示例：

为什么不试试饼图呢。许多jQuery插件可用。其中一个在这里：这是一篇关于你要做什么的好文章：不，我不想让圆按饼状填充，但红色部分将覆盖圆表面的%。安德烈亚斯·卡尔博的答案正是我想要的：）哇，太简单了。。谢谢这正是我一直在寻找的：）将使这成为我可以接受的答案

<div id="progressWrap">
    <span class="progressRed"></span>
</div>

#progressWrap {
  width: 50px;
  height: 50px;
  display: block;
  background-color: forestgreen;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%; 
  border-radius: 100%;
}
.progressRed {
    width: 50%;
    height: 50px;
    float: right;
    background-color: red;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}