/**
   scss translated to css using this super cool pen: https://codepen.io/j0be/pen/MKRVyN
*/

.loading_container { transition: 0.2s all; position: relative; z-index: 100; background: white; } .loading_container.active { height: 5px; } .loading_container .loader { transition: 0.2s all; } .loading_container .loader .beer { background: #ffc106; } .loading_container .loader .shine { background: #eeb506; } .loading_container .loader .cup .left { width: 20px; height: 10px; background: #253138; } .loading_container .loader .cup .bottom { width: 21px; height: 11px; background: #253138; } .loading_container .loader .cup .right { width: 22px; height: 12px; background: #253138; } .loading-animation { /* Foam */ } .loading-animation #container { height: 330px; margin: 0 auto; overflow: hidden; position: relative; width: 172px; } .loading-animation #container div { position: absolute; } .loading-animation #beaker { margin: auto; margin-top: 125px; height: 200px; width: 130px; position: relative; margin-bottom: 20px; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom: 25px #212121 solid; margin-left: 20px; } .loading-animation #beaker:after { content: ''; width: 25px; position: absolute; top: -19px; right: -10px; bottom: -21px; background-color: #fff; transform: skew(-5deg); border-left: 25px solid #212121; } .loading-animation #beaker:before { content: ''; width: 25px; position: absolute; top: -19px; left: -10px; bottom: -21px; background-color: #fff; transform: skew(5deg); border-right: 25px solid #212121; z-index: 1; } .loading-animation .white { margin: auto; margin-top: 109px; height: 200px; width: 130px; position: relative; margin-bottom: 20px; margin-left: 20px; z-index: 2; } .loading-animation .white:after { content: ''; width: 25px; position: absolute; top: -3px; right: -10px; bottom: 9px; background-color: transparent; transform: skew(-5deg); border-left: 10px solid white; } .loading-animation .white:before { content: ''; width: 25px; position: absolute; top: -3px; left: -10px; bottom: 9px; background-color: transparent; transform: skew(5deg); border-right: 10px solid white; z-index: 1; } .loading-animation #liquid { background-color: #FFC107; border: 10px solid #FFC107; border-radius: 0 0 20px 20px; bottom: 10px; height: 0px; overflow: hidden; width: 126px; margin-left: -3px; -webkit-animation-name: beer; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 3000ms; } .loading-animation #liquid:after { background-color: rgba(255, 255, 255, 0.25); bottom: -10px; content: ''; height: 200px; left: -40px; position: absolute; -webkit-transform: rotate(15deg); width: 110px; transform: skew(-5deg); } .loading-animation #liquid:before { transform: skew(5deg); } .loading-animation #liquid .bubble { -webkit-animation-name: bubble; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; background-color: rgba(255, 255, 255, 0.2); bottom: 0; border-radius: 10px; height: 20px; width: 20px; } @-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; } } @-webkit-keyframes beer { 0% { height: 0; } 50% { height: 184px; } 100% { height: 184px; } } @-webkit-keyframes foam { 0% { bottom: 0px; } 55% { bottom: 200px; } 100% { bottom: 200px; } } @-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; } } @-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; } } @-webkit-keyframes foam-size-5 { 0% { width: 0px; height: 0px; opacity: 0; } 40% { width: 15px; height: 15px; opacity: .3; } 60% { width: 21px; height: 25px; opacity: 1; } 100% { width: 21px; height: 25px; opacity: 1; } } @-webkit-keyframes foam-size-6 { 0% { width: 0px; opacity: 0; height: 0px; } 40% { width: 15px; height: 15px; opacity: .3; } 60% { width: 32px; height: 25px; opacity: 1; } 100% { width: 32px; height: 25px; opacity: 1; } } .loading-animation .bubble1 { left: 170px; -webkit-animation-delay: 1000ms; -webkit-animation-duration: 1000ms; } .loading-animation .bubble2 { left: 50px; -webkit-animation-delay: 700ms; -webkit-animation-duration: 1100ms; } .loading-animation .bubble3 { left: 100px; -webkit-animation-delay: 1200ms; -webkit-animation-duration: 1300ms; } .loading-animation .bubble4 { left: 130px; -webkit-animation-delay: 1100ms; -webkit-animation-duration: 700ms; } .loading-animation .bubble5 { left: 10px; -webkit-animation-delay: 1300ms; -webkit-animation-duration: 800ms; } .loading-animation .beer-foam { position: absolute; bottom: 10px; -webkit-animation-name: foam; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 3000ms; } .loading-animation .foam-1, .loading-animation .foam-2, .loading-animation .foam-3, .loading-animation .foam-4 { float: left; position: absolute; z-index: 2; width: 50px; height: 50px; background-color: #ffeecc; } .loading-animation .foam-1 { top: -25px; left: -6px; border-radius: 30px; } .loading-animation .foam-2 { top: -30px; left: 20px; border-radius: 30px; } .loading-animation .foam-3 { top: -20px; left: 50px; border-radius: 30px; } .loading-animation .foam-4 { top: -25px; left: 84px; border-radius: 30px; } .loading-animation .foam-5 { top: 29px; left: 88px; border-radius: 30px; float: left; position: absolute; z-index: 2; width: 21px; height: 25px; background-color: #ffeecc; } .loading-animation .foam-6 { top: 13px; left: 82px; border-radius: 30px; float: left; position: absolute; z-index: 2; width: 32px; height: 25px; background-color: #ffeecc; } .loading-animation .foam-2, .loading-animation .foam-3, .loading-animation .foam-4 { -webkit-animation-name: foam-size; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 3000ms; } .loading-animation .foam-5 { -webkit-animation-name: foam-size-5; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 3000ms; } .loading-animation .foam-6 { -webkit-animation-name: foam-size-6; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 3000ms; } .loading-animation .foam-1 { -webkit-animation-name: foam-size-1; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 3000ms; } .loading_container { position: relative; } .loading_container .loading_wrap { position: absolute; text-align: center; z-index: -1; display: none; background: white; width: 100%; height: 500px; } .loading_container .loading_wrap.active { z-index: 10; display: block; } .loading_container .loading_wrap .loading-animation { transform: scale(0.5); margin: -80px auto -60px; } .loading_container .loading_wrap p { font-size: 20px; }