We have beer on the brain here in Asheville, NC. As local Asheville digital brewers wanting to create a loader icon for a new app, why not make it a pint glass that infinitely fills with beer?!

Animations can be created a few different ways, but I prefer to create them in html and css with webkit animations.

Thirsty yet?


In the html, I created different containers for the pint glass, the foam, and the bubbles.

<div class="loading-animation">
    <div class="container">
        <div class="white"></div>
        <div class="pint">
            <div class="beer-foam">
                <div class="foam-1"></div>
                <div class="foam-2"></div>
                <div class="foam-3"></div>
                <div class="foam-4"></div>
                <div class="foam-5"></div>
                <div class="foam-6"></div>
            </div>
            <div class="liquid">
                <div class="bubble bubble1"></div>
                <div class="bubble bubble2"></div>
                <div class="bubble bubble3"></div>
                <div class="bubble bubble4"></div>
                <div class="bubble bubble5"></div>
            </div>
        </div>
    </div>
</div>

Each bubble and piece of foam are separated, because each one’s animation and/or timing is slightly different.

The bubbles use the same animation, but at different speeds and placements to look like carbonation.

  @-webkit-keyframes bubble {
    0% { 
      bottom: 0; 
    }

    50% {
      background-color: rgba(255, 255, 255, 0.2);
      bottom: 80px;
    }

    100% {
      background-color: rgba(255, 255, 255, 0);
      bottom: 160px;
    }
  }

  .bubble1 {
    left: 170px;
    -webkit-animation-delay: 1000ms;
    -webkit-animation-duration: 1000ms;
  }

  .bubble2 {
    left: 50px;
    -webkit-animation-delay: 700ms;
    -webkit-animation-duration: 1100ms;
  }

  .bubble3 {
    left: 100px;
    -webkit-animation-delay: 1200ms;
    -webkit-animation-duration: 1300ms;
  }

  .bubble4 {
    left: 130px;
    -webkit-animation-delay: 1100ms;
    -webkit-animation-duration: 700ms;
  }

  .bubble5 {
    left: 10px;
    -webkit-animation-delay: 1300ms;
    -webkit-animation-duration: 800ms;
  }

The pieces of foam appear and grow at different rates, to look like the foam is appearing as the beer is poured. The foam also rises as one group while the pint glass is filled, so there is an animation for the div containing all of the pieces of foam as well as the individual pieces.

For the entire foam div, I wanted it to rise from the bottom to the top of the glass.

   @-webkit-keyframes foam {
    0% {
      bottom: 0px;
    }

    55% {
      bottom:200px;
    }
    100% {
      bottom:200px;
    }
  }

For each foam piece, I wanted them to increase in opacity and grow.

  @-webkit-keyframes foam-size {
    0% {
      width: 0px;
      height:0px;
      opacity: 0;
    }
    40% {
      width:20px;
      height:20px;
      opacity: .3;

    }
    60% {
      width:50px;
      height:50px;
      opacity: 1;

    }

    100% {
      width:50px;
      height:50px;
      opacity:1;
    }
  }

Some pieces, I wanted to grow and appear slightly differently, so that it looks more natural. For each one that I animated differently, I created a different animation. For example:

@-webkit-keyframes foam-size-1 {
    0% {
      width: 0px;
      height:0px;
      opacity: 0;
      left:15px;
    }
    40% {
      width:20px;
      height:20px;
      opacity: .3;
      left:15px;

    }
    60% {
      width:50px;
      height:50px;
      opacity: 1;
      left: -6px;

    }

    100% {
      width:50px;
      height:50px;
      opacity:1;
      left: -6px;
    }
  }

To call the animation, you need to assign it to what you want to animate and add attributes like timing and duration. For example:

  .foam-1{
    -webkit-animation-name: foam-size-1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3000ms;
  }

To create the illusion of the pint glass being filled, I created an animation to change the height of the “liquid” div.

  @-webkit-keyframes beer {
    0% {
      height: 0;
    }
    50%{
      height:184px;
    }

    100% {
      height:184px;
    }
  }

Next, I assigned it to the div I wanted to animate.

  .liquid {
    -webkit-animation-name: beer;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3000ms;
  }

Animations are fun to create especially when you’re animating an infinitely refilling pint glass! 🙂 If that doesn’t quench your thirst, read more about how to create a digital brewery brand experience.