jquery - 做一个圆形的进度条

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 动态变化，也许我也可以更改 border-radius 以使其再次适合 progressWrap？我只是不知道如何计算那种情况下所需的边界半径。

非常感谢任何帮助!

Answer 1

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

在父级(绿色)部分设置overflow: hidden，并移除红色部分的半径。

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