Battery Meter
A copy-paste stats & counters component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Stats & CountersHTMLCSSany framework
78%
Copy into your project
HTML
<!-- Battery Meter -->
<div class="nuda-battery" role="img" aria-label="Battery 78 percent">
<div class="nuda-battery__shell">
<span class="nuda-battery__fill"></span>
</div>
<span class="nuda-battery__cap"></span>
<span class="nuda-battery__pct">78%</span>
</div>CSS
/* Battery Meter
Battery icon filling to a target percentage.
Customize: --bat-color, --bat-shell, --bat-target. */
.nuda-battery {
--bat-color: #e4ff54;
--bat-shell: #fafafa;
--bat-target: 78%;
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
}
.nuda-battery__shell {
position: relative;
width: 72px;
height: 28px;
border: 2px solid var(--bat-shell);
border-radius: 5px;
padding: 2px;
}
.nuda-battery__fill {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--bat-color), rgba(228, 255, 84, 0.6));
border-radius: 2px;
box-shadow: inset 0 0 6px rgba(228, 255, 84, 0.4);
animation: nuda-battery-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.nuda-battery__cap {
display: inline-block;
width: 3px;
height: 12px;
background: var(--bat-shell);
border-radius: 0 2px 2px 0;
margin-left: -10px;
}
.nuda-battery__pct {
font: 700 0.875rem ui-sans-serif, system-ui, sans-serif;
color: #fafafa;
font-variant-numeric: tabular-nums;
}
@keyframes nuda-battery-fill { to { width: var(--bat-target); } }
@media (prefers-reduced-motion: reduce) {
.nuda-battery__fill { width: var(--bat-target); animation: none; }
}How to use Battery Meter
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.