在一个圆圈里做一个进度条

I need to make a 'health' progress bar for a project, where green represents the filled in data and red the empty data. I got a nice circle when the red part is 50%, but as soon as that value changes to anything else the border-radius is all messed up..

我需要为一个项目创建一个“health”进度条，其中绿色表示填充的数据，红色表示空数据。当红色的部分是50%时，我得到了一个漂亮的圆，但是当这个值改变到任何其他值时，边界半径就会变得一团糟。

Here is what I have at the moment:

以下是我目前的想法:

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/

The width value of the progressRed class is going to be dynamic with Jquery, perhaps I could alter the border-radius as well to make it fit the progressWrap again? I just wouldn't know how to calculate the border-radius needed in that case.

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

Any help is much appreciated!

非常感谢您的帮助!

1 个解决方案

#1

The red part doesn't need a border radius. Since it's wrapped entirely in the green circle, it's easier to just let it stay a square and hide the overflow from the parent.

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

Set overflow: hidden on the parent (green) part, and remove the radii from the red.

设置溢出:隐藏在父(绿色)部分，从红色中删除半径。

Example: http://jsfiddle.net/q48Qf/3/

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

#1