css battery charging animation
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="top-head"></div>
<div class="battery">
<i class="fa-solid fa-bolt-lightning fa-5x"></i>
<div class="batt-back">
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="top-head"></div>
<div class="battery">
<i class="fa-solid fa-bolt-lightning fa-5x"></i>
<div class="batt-back">
</div>
</div>
</div>
</body>
</html>
css code:
*,*::after,*::before{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
background-color: black;
}
.battery{
border: 5px solid gray;
width: 20vh;
height: 40vh;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
overflow: hidden;
}
.top-head{
width: 7vh;
height: 4vh;
border: 5px solid gray;
border-radius: 10px 10px 0px 0px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.container{
display: grid;
justify-content: center;
margin-top: 20vh;
}
.batt-back{
background-color: green;
width: 100%;
height: 100%;
border-radius: 15px;
animation: duck 4s linear infinite;
}
.fa-bolt-lightning{
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
position: absolute;
}
@keyframes duck{
0%{
transform: translateY(150px);
background-color: red;
}
25%{
background-color: orange;
}
50%{
background-color: yellow;
}
75%{
background-color: yellowgreen;
}
100%{
background-color: rgb(11, 212, 11);
}
}
Caution - In the recruitment process, legitimate companies never charge a fee from candidates. If there are companies that charge for interviews, tests, ticket reservations, etc., it is better to avoid them because there are indications of fraud. Do not transfer any payments when applying for a job.