Create a progress bar in a circle

Question

I need to create a “health” status indicator for a project where green represents filled data and blots empty data. I got a good circle when the red part is 50%, but as soon as this value changes to something else, the border radius will be corrupted.

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 will be dynamic with jQuery, maybe I could change the radius of the border to align progressWrap again? I just did not know how to calculate the radius of the border needed in this case.

Any help is much appreciated!

Answer 1

. , .

overflow: hidden () .

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