Glass of water to show progress CSS JQuery

I have been working on an app and recently started making some pretty large changes to it. Basically, the app enables the user to keep track of the water they drink and apply that to the goal they set at registration.

One of the features would be a visual rep of their current progress, but I can't figure out how to do it the way I want.

I want a glass of water, that fills up based on current status. (glass fills to 75% if user has 75% of goal, etc).

Any ideas? Ive looked it up over and over again, but no luck.

BECAUSE OF CLOSE VOTES:

The question -> How would I use a glass of water as a progress bar?

That should be clear enough now, but if not.. just let me know.

Solution

Here's a fiddle I made doing exactly what you describe. You should be able to see what's going on!

http://jsfiddle.net/mike_marcacci/XztTN/

Basically, just nest a div.water inside div.glass, position the water to the bottom of the glass, and animate its height with query!

$(function(){
    $('.water').animate({
        height: '75%'
    }, 1000)
})