制作一个圆形进度条

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？但我不知道如何计算在这种情况下需要的border-radius。

非常感谢您的帮助！

- Guinn

---

为什么不尝试使用饼图呢？有许多jQuery插件可供选择，其中一个是：http://www.jqplot.com/tests/pie-donut-charts.php。 - Bhushan Kawadkar

这是一篇关于你正在尝试做的事情的好文章：http://css-tricks.com/css-pie-timer/ - Tomanow

不，我不想让圆形以馅饼的方式填充，而是让红色部分覆盖圆形表面的一定百分比。Andreas Carlbom的答案正是我在寻找的 :) - Guinn

Answer 1

红色部分不需要边框半径。因为它完全包含在绿色圆圈内，所以最好让它保持正方形，并隐藏父元素的溢出。

在父元素(绿色)上设置overflow:hidden，并从红色部分中删除边角半径。

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

- Andreas Eriksson

---

哇，太简单了。谢谢！这正是我在寻找的东西 :) 一旦可以，我会将其选为采纳答案。 - Guinn