Getting my "beer" vertical progress bar to work

user_607407 0
Viewed 327

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:

enter image description here

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:
    enter image description here
  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:
    enter image description here

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.

progress-bar css html javascript
2 Answers

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>

user_63963800

So the fixes I figured out were:

  1. Add margin-top: -1 to div.beer-top to erase the orange line. The white and foam divs now overlap, so the div under then doesn't shine through.

  2. Use display: flex to make the div.white fill all space except the div.beer-tops space.

      div.progress div.top {
      height: 100%;
      position: relative;
      bottom: 100%;
      /**Modern flexbox layout*/
      display: flex;
      flex-direction: column;
  }
  div.progress div.top div.white{
      background-color: white;
      width:100%;
      /*fill remaining space*/
      flex-grow: 1;
  }


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: 100%;
    position: relative;
    bottom: 100%;
    /**Modern flexbox layout*/
    display: flex;
    flex-direction: column;
}
div.progress div.top div.white{
    background-color: white;
    width:100%;
    /*fill remaining space*/
    flex-grow: 1;
}
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;
    
    /** this should hide the blinking orange line atop*/
    margin-top:-2px;
}
/*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>

user_6074070
Related