border-radius + overflow:hidden when animating with jQuery

Question

Check this jsFiddle.

The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.

Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.

Also is there a better solution for this?

Answer 1

Modified your fiddle a little bit. Here is the link

Modifications: Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css

Check if this works for you.