Charging battery loader with percentage
The battery fills segment by segment with a pulsing bolt while the percentage counts up on its own, without JavaScript.
Settings
Code
<div class="uv-lbc" role="status"><span class="bt"><i></i><i></i><i></i><i></i><i></i><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2L5 13.5h6L9.5 22 19 9.5h-6z"/></svg></span><span class="pc"></span></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
See all LoadersWhere to use it
Charging is one of the clearest progress metaphors there is. This loader fills five segments one after another, pulses a lightning bolt over them and counts the percentage from 0 to 100 using a registered integer custom property and a CSS counter, a modern trick that needs no script at all.
It suits electric vehicle apps, device dashboards, onboarding steps and any progress that should feel like gaining energy. The main color fills the segments and the second colors the bolt, and the loop restarts after a brief pause at full.