How to fill a transparent image with a progress bar ? #CSS #HTML #Jquery?

Question

There you go :D (this is what you can do with a few alterations to the css-trick example): Demo: http://jsfiddle.net/djnBD/

<html>
<head>
<meta charset="UTF-8">
<title>Fillable Beer Bottle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
        $(function() {
            $(".liquid").each(function() {
                $(this)
                    .data("origHeight", $(this).height())
                    .height(0)
                    .animate({
                        height: $(this).data("origHeight")
                    }, 1200);
            });
        });
    </script>

    <style>
        .glass { 
            height: 200px;
            position: relative;
            background-image: url('http://i40.tinypic.com/11hyr1j.png'); /* Beer Glass */
            background-repeat: no-repeat;
        }
        .liquid {
            z-index:-1;
            position:absolute;
            bottom:0;
            width: 200px;
            background-image: url('http://i44.tinypic.com/f0vxbt.jpg'); /* Beer Liquid Pattern */
            /* Remove the bottom two lines to stop animation */
            -webkit-animation: move 150s linear infinite;
            -moz-animation: move 150s linear infinite;
        }

        @-webkit-keyframes move {
            0% {
               background-position: 0 0;
            }
            100% {
               background-position: 2212px 0px;
            }
        }

        @-moz-keyframes move {
            0% {
               background-position: 0 0;
            }
            100% {
               background-position: 2212px 0px;
            }
        }

    </style>
</head>
<body>
<div class="glass">
            <span class="liquid" style="height: 30%"></span>
        </div>
</body>
</html>