CSS電池充電載入動畫對于網站的用戶體驗來說非常重要，它可以讓用戶在等待頁面加載的過程中保持耐心，同時也可以讓網站看起來更加現代和專業。

.battery-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.battery-fill {
height: 80%;
width: 40%;
border-radius: 50px;
position: relative;
overflow: hidden;
background-color: #ddd;
box-shadow: inset 0 0 10px rgba(51, 51, 51, 0.1);
}
.battery-fill:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05) 100%);
animation: loading 2s linear infinite;
transform-origin: bottom center;
}
.battery-fill:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #09c6f9;
transform-origin: bottom center;
animation: fill 2s linear infinite;
animation-delay: 1s;
}
@keyframes loading {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.1);
}
}
@keyframes fill {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}

上面的代碼是實現CSS電池充電載入動畫所需的CSS代碼。如果需要將這個動畫應用到網站中，我們需要在HTML文件中加上如下代碼：

<div class="battery-wrapper">
<div class="battery-fill"></div>
</div>

然后你就可以在你的網站上看到這個漂亮的充電動畫了！