How to Make Battery Charging Animation with HTML CSS
Hello, Viewer. In this article I will teach you how to make Battery Charging Animation with HTML CSS. you know that CSS3 add animation effect. so, in this article I will make a battery changing animation help of css3 keyframes. so, let’s start practical our project. you can see the below code.
How To Make animated border effect using html css
I will make a div that class name is battery. its main div our project. this battery div contain all battery elements. then I make Two another’s div first one class name is battery head and second one class name is battery body you can see the below code. then I add icon inside battery body div. if you are difficulties to understand what are I am doing then you can copy the below code.
Create Responsive Image Gallery Using Flexbox | Flexbox Responsive Image Gallery
HTML Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="battery">
<div class="battery-head"></div>
<div class="battery-body">
<i class="fas fa-bolt"></i>
<div class="charge"></div>
</div>
</div>
</body>
</html>
And then you can create a style sheet. when you create a stylesheet first thing you check and confirmed CSS file link in properly. CSS link is properly set in html document. then you start coding in your stylesheet. I know this is common things but if you New in this field. then these types of things create problem for you so you can don’t ignored it. so, let’s start coding in stylesheet first i will define all colours in root. when you define your colour in roots it is easy to use everywhere you can see in below code. you can copy the below code in your stylesheet.
CSS Code
:root{
--red:#ff0000;
--orange:#ff9100;
--yellow:#fff200;
--yellow-green:#d7fc03;
--green:#00ff00;
--black:#000000;
--gray:#9e9e9e;
--white:#ffffff;
}
body{
width: 100vw;
height: 100vh;
background: var(--black);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes battery-bolt{
50%{transform: scale(1.3);}
100%{transform: scale(1);}
}
@keyframes battery-charge{
0%{height: 0%; background: var(--red);}
25%{height: 25%; background: var(--orange);}
50%{height: 50%; background: var(--yellow);}
75%{height: 75%; background: var(--yellow);}
100%{height: 100%; background: var(--green);}
}
.battery-head{
width: 30px;
height: 10px;
background: var(--black);
margin: 0 auto;
border: 4px solid var(--white);
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.battery-body{
width: 100px;
height: 200px;
background: transparent;
position: relative;
margin: 0 auto;
border: 4px solid var(--white);
border-radius: 18px;
}
i.fa-bolt{
color: var(--white);
font-size: 40px;
position: absolute;
left: 38%;
top: 40%;
z-index: 1;
animation: battery-bolt 2s linear infinite;
}
.charge{
width: 100%;
position: absolute;
bottom: 0;
border-radius: 14px;
animation:battery-charge 8s linear infinite;
z-index: -1;
}
if you have felled any issue to understand this project. then you can also watch video tutorial.
Charging Animation Using HTML & CSS Only | Battery Charging Animation with HTML CSS
