I don't think jQuery UI's progressbar can do anything like that, you would have to roll your own. An image sprite with 10 or so different states for percent complete should work, along with an element positioned on top of it to hold the text percent value.
Sorry, i don't have anything remotely close to what you would need (though it wouldn't really be very much code at all).
You could use the jQuery UI progressbar widget as a starting point, this progressbar would be similar, just using different markup and instead of changing the width of a bar, it changes the background position of an image sprite.
You can almost achieve it with just css, the issue is the bar width% needs to be instead setting the background position of the spritegraphic. You could do it by simply using the progressbar plugin and using your own styles, and binding to the event that gets triggered when the progressbar is updated, and on that event set the background position of the sprite based on the current % complete.
Basically just make an image with several different states for the circle loading bar (10%, 20%, 30% etc.), and make something like this:
<div id="progress_percentage">xx %</div>
The #progress_circle DIV has the background set to "background: white url(/images/progressStates.jpg) no-repeat center left;" (the left-most part of the image being 0% progress) and you gradually, upon progress, shift the X value of "background-position" of this DIV by the width of a single progress block (see this image for an example of what I mean).
So if you have the progress image made out of 11 blocks (0% through 100% step 10%) and each block is 50px wide, you must change it like this: "background-position: center (50*step)px;".
And, obviously, the #progress_percentage DIV is a black circle containing the progress text (must have transparent background to make the progress bar show through it).