Getting my "beer" vertical progress bar to work

Question

I'm trying to make a progress bar that looks like emptying glass of beer. Unfortunately I'm not very artistic person but I'm doing my best.

My concept goes like this:

1. There is a <div> with "beer" background, 100% high vertically. It hides any overflow
2. Inside there's another <div>, positioned relatively to the parent. It contains:
   1. White background <div> to obscure "beer" pattern when it's gone
   2. The image of beer foam cap

Here's the concept on picture:

I almost succeeded in my goal, as you can see in this snippet:

_{Note: the animation requires ES6 async/await}

Promise.timeout = function (delay) {
            return new Promise((resolve) => {
                setTimeout(resolve, delay);
            });
        };
        Promise.animationFrame = function () {
            return new Promise((resolve) => {
                requestAnimationFrame(resolve);
            });
        };
        (async function () {
            const progress = document.querySelector("div.top");
            for (let i = 0, l = 1000; i < l; ++i) {
                progress.style.bottom = (100 - i / 10) + "%";
                await Promise.animationFrame();
            }
        })();

html, body, div {
    margin: 0px;
    padding: 0px;
}
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
div.progress {
    max-width:300px;
    width: 100vw;
    
    float: left;
    position: relative;
    overflow: hidden;
    height: 100%;
    background-image: url("https://i.imgur.com/SKfSqEv.jpg");
    background-size: 500px;

    border-right: 1px solid black;
}
div.progress div.top {
    height: 100vh;
    position: relative;
    bottom: 100%;
}
div.progress div.top div.white{
    background-color: white;
    width:100%;
    height:100%;
}
div.progress div.top div.beer-top {
    /*background-image is at the bottom since it is bse64 */
    background-repeat: repeat-x;
    background-position-y: bottom;
    background-position-x: left;
    background-size: 302px, 100px;
    height: 100px;
}
/*div.progress div.top {
    background-position: bottom;
    height: 100%;
    background-image: url("img/beer-top.png");
}*/
div.main {
    float: left;
}

div.progress div.top div.beer-top {
    background-image:  url('https://preview.ibb.co/k2x2V6/beer_top.png');
}

<div class="progress">
        <div class="top">
            <div class="white"></div>
        <div class="beer-top"></div>
        </div>
        <!--<div class="progress-area">


        </div>-->
    </div>

    <div class="main">

    </div>

But there are two big issues:

1. This ugly orange line:
   
2. Because I set div.white height to 100%, the foam is pushed down and is visible even at "100%" state. It also disappears completely at the end. The desired state is this:
   

How to fix those two issues?

I'm looking for CSS only solution, so that the bar can be displayed statically as well (eg. at 40% when the page loads without javascript).

Also note: setting the foam as background for the "white div" is not an option, because the bottom of the foam image is transparent.

Answer 1

Because there was a need for a CSS only solution. You could add the foam to your 'white' div as a background and a white gradient (ofcourse some tweeking is needed with the image to show up perfectly).

See JSfiddle:

            Promise.timeout = function (delay) {
            return new Promise((resolve) => {
                setTimeout(resolve, delay);
            });
        };
        Promise.animationFrame = function () {
            return new Promise((resolve) => {
                requestAnimationFrame(resolve);
            });
        };
        (async function () {
            const progress = document.querySelector("div.top");
            for (let i = 0, l = 1000; i < l; ++i) {
                progress.style.bottom = (100 - i / 10) + "%";
                await Promise.animationFrame();
            }
        })();

html, body, div {
    margin: 0px;
    padding: 0px;
}
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
div.progress {
    max-width:300px;
    width: 100vw;
    
    float: left;
    position: relative;
    overflow: hidden;
    height: 100%;
    background-image: url("https://i.imgur.com/SKfSqEv.jpg");
    background-size: 500px;

    border-right: 1px solid black;
}
div.progress div.top {
    height: 100vh;
    position: relative;
    bottom: 100%;
}
div.progress div.top div.white{
    background-color: white;
    width:100%;
    height:100%;
}
div.progress div.top div.beer-top {
    /*background-image is at the bottom since it is bse64 */
    background-repeat: repeat-x;
    background-position-y: bottom;
    background-position-x: left;
    background-size: 302px, 100px;
    height: 100px;
}
/*div.progress div.top {
    background-position: bottom;
    height: 100%;
    background-image: url("img/beer-top.png");
}*/
div.main {
    float: left;
}

div.progress div.top div.beer-top {
    background-image:  url('https://preview.ibb.co/k2x2V6/beer_top.png');
}

.top {
    background: no-repeat;
    background-position: bottom;
    background-image:  url('https://preview.ibb.co/k2x2V6/beer_top.png'),linear-gradient(to top, rgba(0,0,0,0) 1%, rgba(255,255,255,1) 5%);
}

<div class="progress">
        <div class="top">
        </div>
        <!--<div class="progress-area">


        </div>-->
    </div>

    <div class="main">

    </div>