A battery icon fills with segments, pulses when full and starts over. Pass a value to show a fixed charge level instead.
Your devices
Fern Watch
Charging, 42 min left
Fern Buds
Fully charged
Charging case
25% remaining
npx shadcn@latest add https://hyperblur.dev/r/loader-battery-fill.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-battery-fill.tsx.
import { LoaderBatteryFill } from "@/components/hyperblur/loader-battery-fill"
<LoaderBatteryFill size={56} value={75} label="Fern Watch" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 56 | Width of the battery body in pixels. Height is half of it. |
| color | string | "#2f7bff" | Fill and glow color. |
| accent | string | "#7fb3ff" | Outline, terminal and highlight color. |
| speed | number | 2.8 | Seconds for one charging loop. Ignored when value is set. |
| segments | number | 4 | Number of fill segments, from 2 to 8. |
| value | number | Charge level from 0 to 100, rounded to whole segments. Leave undefined to loop. At 100 the battery pulses. | |
| label | string | Visible caption under the battery. Without it, Charging is announced to screen readers only, followed by the value when set. |