Skip to content

Commit 8c52d0f

Browse files
RAHULBAWA777RAHULBAWA777
committed
Charging animation added with readme
1 parent 81d0f73 commit 8c52d0f

File tree

3 files changed

+119
-0
lines changed

3 files changed

+119
-0
lines changed

‎Charging Animation/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
# Charging animation
3+
battery Animation using css
4+
5+
## 🚀 About Me
6+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
7+
8+
9+
## Run Locally
10+
11+
Clone the project
12+
13+
14+
Start the live server
15+
16+
17+
## Used By
18+
19+
This project is used by the following companies:
20+
21+
- https://github.com/Dezenix/frontend-html-css-js

‎Charging Animation/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Battery Charging Animation</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="battery">
12+
<div class="nib"></div>
13+
<div class="case">
14+
<i class="fa-solid fa-bolt"></i>
15+
<div class="charge"></div>
16+
</div>
17+
</div>
18+
<script src="https://kit.fontawesome.com/fa1e66a5e4.js" crossorigin="anonymous"></script>
19+
</body>
20+
</html>

‎Charging Animation/style.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
body{
2+
background-color: rgb(7, 7, 7);
3+
overflow: hidden;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
margin-top: 10%;
8+
}
9+
10+
.nib{
11+
height: 20px;
12+
width: 60px;
13+
/* background: black; */
14+
border-top-right-radius: 8px;
15+
border-top-left-radius: 8px;
16+
border: 5px solid grey;
17+
margin: 0 auto;
18+
}
19+
20+
.case{
21+
width: 200px;
22+
height: 350px;
23+
background: black;
24+
border-radius: 20px;
25+
margin: 0 auto;
26+
position: relative;
27+
border: 4px solid grey;
28+
}
29+
30+
i.fa-bolt{
31+
color: whitesmoke;
32+
z-index: 1;
33+
top: 30px;
34+
left: 40%;
35+
font-size: 40px;
36+
position: absolute;
37+
animation: symbol 2s linear infinite;
38+
}
39+
40+
.charge{
41+
width: 100%;
42+
position: absolute;
43+
bottom: 0;
44+
border-radius: 14px;
45+
animation: charging 6s linear infinite;
46+
}
47+
48+
@keyframes symbol{
49+
50%{
50+
transform: scale(1.2);
51+
}
52+
100%{
53+
transform: scale(1);
54+
}
55+
}
56+
57+
@keyframes charging{
58+
0%{
59+
height:0%;
60+
background-color:red;
61+
}
62+
25%{
63+
height:25%;
64+
background-color:orange;
65+
}
66+
50%{
67+
height:50%;
68+
background-color:yellow;
69+
}
70+
75%{
71+
height:75%;
72+
background-color:yellow-green;
73+
}
74+
100%{
75+
height:100%;
76+
background-color:green;
77+
}
78+
}

0 commit comments

Comments
 (0)