电池充电加载动画（Battery Charging Loader 电量递增）

效果演示（真实可交互）

电池外壳内绿色电量从 0% 匀速涨到 100% 后自动清零循环，下方的百分比数字与液面高度严格同步，闪电符号保持呼吸脉动。绿 / 蓝 / 粉三套配色，速度 0.3× - 3× 可调。

完整代码

HTML 结构：

<div class="bc-battery">
  <span class="bc-cap"></span>                 <!-- 电池正极凸起 -->
  <span class="bc-shell">                      <!-- 电池外壳 -->
    <span class="bc-fill"></span>              <!-- 电量液面 -->
    <span class="bc-bolt">⚡</span>            <!-- 闪电图标 -->
  </span>
</div>
<p class="bc-percent">0%</p>

CSS 核心：

.bc-shell {
  position: relative; width: 110px; height: 54px;
  border-radius: 12px; border: 3px solid #cfd7ea;
  background: #eef1f9; overflow: hidden;
}
.bc-fill {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, #7be0a5, #34c48b);
  transition: height .16s linear;               /* 液面平滑上升 */
}
.bc-bolt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; color: #fff;
  animation: bc-bolt-pulse 1s ease-in-out infinite;
}
@keyframes bc-bolt-pulse { 0%, 100% { transform: scale(1); opacity: .85; }
                           50% { transform: scale(1.22); opacity: 1; } }

JS 核心（电量递增）：

let pct = 0, timer = null;
function tick() {
  pct = (pct + 1) % 101;                        // 0→100 循环
  fill.style.height = pct + '%';                // 液面与数字同步
  percentEl.textContent = pct + '%';
}
timer = setInterval(tick, 260 / speed);         // speed 为倍率

参数说明

兼容性与性能

• 电量递增由 setInterval 驱动，仅修改 height 一个样式属性，配合 CSS 过渡平滑渲染
• 液面动画属于轻量重绘，可接受；若追求极致性能可改用 transform: scaleY 并配合 transform-origin: bottom
• 兼容 Chrome / Firefox / Safari / Edge 最新版；grid 布局需求 Chrome 57+，移动端一致
• 定时器在页面不可见时可用 document.visibilitychange 暂停，节省电量
• 适合下载进度、资源预加载、上传队列等”有明确上限（100%）“的等待场景，百分比数字让等待时间可预期

常见问题

Q: 电量到 100% 后想停住而不是循环怎么办？ 在 tick 里判断 pct >= 100 时 clearInterval(timer)，并给外壳加一个”充满”样式（如闪电换成对勾 ✓）即可。

Q: 液面有拖影/不平滑？ 确认 transition 时长小于 setInterval 间隔；间隔改小（如 100ms）但过渡保持 0.1s，会更跟手。

Q: 想显示真实下载百分比？ 把 tick 里的自增逻辑换成外部传入的进度值，如监听 XMLHttpRequest 的 progress 事件，其余渲染逻辑不变。

Q: 为什么闪电图标盖住了电量颜色？ 给 .bc-bolt 加 text-shadow 并降低 opacity，或在液面上层叠半透明高光（.bc-fill::before）让闪电层更有层次。