The easiest way to do this is to create a mask with a circular hole in it, and then animate a rectangle behind it. For example:
<path fill="#fff" fill-rule="evenodd"
d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z"/>
The path data here starts with a square box 200 units wide (M0 0 200 0 200 200 0 200Z) and then uses two arcs to draw a circle of diameter 80 units inside it (A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z). The evenodd fill rule ensures that the circle is cut out from the square.
If you want the circle to fill from bottom to top, then you'll have to use a rotate transformation:
<rect transform="rotate(180 100 100)" x="20" y="20" width="160" height="0" fill="#47f" id="fillup"/>
This spins the coordinate system around the middle of the SVG image so that the rect grows upwards when you increase its height. Here, I'm using a CSS transition to change the height of the rect when you hover over it. But you can use Javascript or JQuery to change the height to whatever you want.
Here's a working example:
svg #fillup { height:0px; transition:height 0.5s; }
svg:hover #fillup { height:160px; }
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="180" height="180" fill="#eee"/>
<rect transform="rotate(180 100 100)" x="20" y="20"
width="160" height="0" fill="#47f" id="fillup"/>
<path fill="#fff" fill-rule="evenodd"
d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0
180 100 80 80 0 0 0 20 100Z"/>
<circle cx="100" cy="100" r="90" fill="none" stroke="#888"
stroke-width="20"/>
<circle cx="100" cy="100" r="99" fill="none" stroke="#333"
stroke-width="1"/>
<circle cx="100" cy="100" r="80" fill="none" stroke="#333"
stroke-width="1"/>
</svg>
