HTML
<div class="loader">
<div class="loader__battery-power loader__battery-power1"></div>
<div class="loader__battery-power loader__battery-power2"></div>
<div class="loader__battery-power loader__battery-power3"></div>
<div class="loader__battery-power loader__battery-power4"></div>
<div class="loader__battery-power loader__battery-power5"></div>
</div>
CSS
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #34495e;
}
.loader {
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
transform: translate3d(-50%, -50%, 0);
width: 100px;
height: 40px;
border: 6.66666667px solid #ffffff;
animation: loader 1s linear 6s infinite alternate forwards;
}
.loader:after {
content: "";
display: block;
width: 6.66666667px;
height: 18.18181818px;
position: absolute;
top: 50%;
right: -20%;
transform: translate(0, -50%);
border: 6.66666667px solid #ffffff;
animation: loader 1s linear 6s infinite alternate forwards;
}
.loader__battery-power {
width: 10px;
height: 70%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #ffffff;
box-sizing: border-box;
animation: loader-battery-power 1s linear backwards;
}
.loader__battery-power1 {
left: 8%;
}
.loader__battery-power2 {
left: 27%;
animation-delay: 1s;
}
.loader__battery-power3 {
left: 45%;
animation-delay: 2s;
}
.loader__battery-power4 {
left: 63%;
animation-delay: 3s;
}
.loader__battery-power5 {
left: 81%;
animation-delay: 4s;
}
@keyframes loader-battery-power {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes loader {
0%, 100% { border-color: #ffffff; }
50% { border-color: #d0d0d0; }
}
