Battery 🔋 Charging Animation
<html>
<head>
<title>Loading Animation</title>
<style>
*, *::after, *::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.base{
height: 200px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.outline{
height: 100px;
width: 150px;
border: 10px solid black;
position: relative;
display: flex;
align-items: center;
border-radius: 5px;
}
.outline::after{
content: "";
display: block;
height: 25px;
width: 15px;
background-color: black;
position: absolute;
right: -25px;
border-radius: 2px;
}
.outline::before{
content: "";
display: block;
height: 35px;
width: 5px;
background-color: black;
position: absolute;
right: -15px;
}
.bar{
height: 100%;
width: 40px;
animation: blink 3s linear infinite;
}
@keyframes blink {
0%{
width: 0%;
}
20%{
width: 0%;
}
21%{
width: 33%;
background-color: red;
}
40%{
width: 33%;
background-color: red;
}
41%{
width: 66%;
background-color: orange;
}
60%{
width: 66%;
background-color: orange;
}
61%{
width: 100%;
background-color: lime;
}
99%{
width: 100%;
background-color: lime;
}
100%{
width: 0%;
}
}
</style>
</head>
<body>
<div class="base">
<div class="outline">
<div class="bar"></div>
</div>
</div>
</body>
</html>
