在圆圈中制作进度条

Question

我需要为一个项目制作一个“健康”进度条，其中绿色代表填充数据，红色代表空数据。当红色部分为 50% 时，我得到了一个漂亮的圆圈，但是一旦该值更改为其他任何值，边界半径就会全部混乱..

这是我目前拥有的：

HTML：

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

CSS：

#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;
}

http://jsfiddle.net/q48Qf/

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

非常感谢任何帮助！

Answer 1

红色部分不需要边框半径。由于它完全包裹在绿色圆圈中，因此更容易让它保持正方形并隐藏父级的溢出。

在父（绿色）部分上设置overflow: hidden，并从红色部分移除半径。

示例：http://jsfiddle.net/q48Qf/3/