<div class="battery">
<div class="liquid"></div>
</div>
<h5>Power Up</h5>
// Settings
$size: 4.5rem;
$speed: 2.25s;
// Container Settings
$batteryHeight: $size;
$batteryRadius: $size * 0.02;
$batteryColor: #425C77;
$batteryBackground: white;
$batteryHighlight: rgba($batteryBackground, 0.325);
// Liquid Settings
$liquidSize: $size / 4;
$liquidOffset: $liquidSize / -2.25;
$liquidColor: #71FB85;
// Loading Keyframes
@keyframes load {
0% { top: $size; }
70% { top: $size * 0.25; }
90% { top: 0; }
95% { top: 0; }
100% { top: $size; }
}
// Wave Keyframes
@keyframes liquid-1 {
0% { height: 0; opacity: 0; top: $liquidOffset; }
22% { height: $liquidSize * 0.25; top: $liquidOffset * -0.75; opacity: 1; }
25% { top: $liquidOffset * 0.5; }
35% { height: $liquidSize * 1; top: $liquidOffset * 1; }
55% { height: $liquidSize * 0.25; top: $liquidOffset * 0.25; }
60% { height: $liquidSize * 0.55; opacity: 1; top: $liquidOffset * 0.55; }
96% { height: $liquidSize * 0.75; opacity: 0; top: $liquidOffset * -1; }
100% { height: 0; opacity: 0; }
}
@keyframes liquid-2 {
0% { height: 0; opacity: 0; top: $liquidOffset; }
17.5% { height: $liquidSize * 0.25; top: $liquidOffset * -0.4; opacity: 1; }
20% { top: $liquidOffset * 0.5; }
25% { height: $liquidSize * 1.25; top: $liquidOffset * 1.25; }
45% { height: $liquidSize * 0.25; top: $liquidOffset * 0.25; }
60% { height: $liquidSize * 1.25; opacity: 1; top: $liquidOffset; }
96% { height: $liquidSize * 0.75; opacity: 0; top: $liquidOffset * -1; }
100% { height: 0; opacity: 0; }
}
// Styles for battery, terminal, and highlight
.battery {
display: inline-block;
position: relative;
width: $size / 2;
height: $size;
box-shadow: 0 0 0 0.2rem $batteryColor;
background: $batteryBackground;
border-radius: $batteryRadius;
// Terminal
&:before {
content: '';
position: absolute;
left: $size / 8;
right: $size / 8;
top: $size * -0.075;
height: $size * 0.075;
width: $size / 4;
background: $batteryColor;
border-radius: $batteryRadius * 2;
}
// Highlight
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-right: ($size * 0.5) solid transparent;
border-bottom: ($size - 0.45) solid $batteryHighlight;
}
}
// Styles for liquid
.liquid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: $size / 2;
background: $liquidColor;
animation: load $speed infinite;
// Bubbles
&:after,
&:before {
content: '';
position: absolute;
top: $liquidOffset;
height: $liquidSize;
width: $liquidSize * 1.3;
background: $liquidColor;
border-radius: 50%;
opacity: 0;
}
&:after {
right: 0;
animation: liquid-1 $speed infinite;
}
&:before {
left: 0;
animation: liquid-2 $speed infinite;
}
}
// Boring Stuff
body {
padding-top: 30vh;
background: #efefef;
text-align: center;
}
@keyframes power {
0% { color: #bcbcbc; }
75% { color: #bcbcbc; text-shadow: none; }
90% { color: darken($liquidColor, 5%); text-shadow: 0 0 0.8em $liquidColor; }
100% { color: #bcbcbc; text-shadow: none; }
}
h5 {
font-family: Lato, sans-serif;
font-weight: 300;
letter-spacing: 0.025rem;
text-transform: uppercase;
color: #bcbcbc;
animation: power $speed infinite;
}
View Compiled
This Pen doesn't use any external CSS resources.