Glass of water to show progress CSS JQuery [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

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.

Answer 1

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)
})

Answer 2

with help of this filling a glass with water using html5

u can have something like this.

js

$(function(){
var p = $("#progress").text();//your percentage
var c = 400;//height of glass
var a = (p/100)*c;
$("#glass").hover(function(){

    $("#water").css("height",a+"px");

});

});

css

#container {
background: rgba(0,0,0,0.10);
margin-left: auto;
margin-right: auto;
width: 300px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 30px;
padding-top: 5px;
}

#glass {
background: rgba(255,255,255,0.50);
border: 1px solid #bbb;
border-top: 1px solid #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 300px;
height: 400px;
position: relative;
}

#water {
background-color: #9cc6ff;
position: absolute;
bottom: 0px;
width: 300px;

-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

#glass:hover #water {
background-position: top left;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
}

check this JSFIDDLE

Answer 3

I do something very similar by absolutely positioning a semi-transparent white PNG over the top of the base image (in your case the glass), and moving it higher as the percentage increases.

<div style="z-index: 10; position: relative;"><img src="images/overlay.png" style="position: absolute; top: 75%; left: 0; width: 100%; height: 250px;"></div>
<p style="text-align: center; margin: 0; padding: 0;"><img src="glass.png" width="100" height="250"></p>

You could also do it with a semi-transparent glass image and a water background image, again moving the water up based on the percentage. That may result in a better effect in this particular instance.