← All elements
<div class="bc"><i></i><i></i><i></i><i></i></div>About this animation
A battery outline whose cells fill one by one, then reset, to show charging progress.
How it works
The battery body is a bordered box with a small terminal drawn by a pseudo-element. Four cells share one keyframe that fades them in and out, with delays that make them light up in sequence.
Ways to customise it
- Change the green of the cells.
- Add more cells for a longer battery.
- Slow the 3.2s loop.
Good to know
A real battery level needs text or a meter element. This one is a loading indicator and is decorative.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.