Segmented Battery
Discrete signal-bar segments that fill from left to right. Each segment has a distinct highlight, giving a tactile, hardware-keypad feel — great for upload progress and connection strength.
Segmented Battery the 4th of 12 designs in the 12 CSS Progress Bar Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div
class="pb-seg"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Network signal"
data-pb-seg="3"
data-pb-seg-total="5"
>
<span class="pb-seg-label">Signal</span>
<span class="pb-seg-rail" aria-hidden="true">
<span class="pb-seg-cell"></span>
<span class="pb-seg-cell"></span>
<span class="pb-seg-cell"></span>
<span class="pb-seg-cell"></span>
<span class="pb-seg-cell"></span>
</span>
<span class="pb-seg-value">3 / 5 bars</span>
</div> .pb-seg {
width: 220px;
display: grid;
gap: 6px;
font-family: system-ui, sans-serif;
}
.pb-seg-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #94a3b8;
}
.pb-seg-rail {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.pb-seg-cell {
height: 22px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
transition: background 0.4s ease;
}
.pb-seg[data-pb-seg="1"] .pb-seg-cell:nth-child(-n + 1),
.pb-seg[data-pb-seg="2"] .pb-seg-cell:nth-child(-n + 2),
.pb-seg[data-pb-seg="3"] .pb-seg-cell:nth-child(-n + 3),
.pb-seg[data-pb-seg="4"] .pb-seg-cell:nth-child(-n + 4),
.pb-seg[data-pb-seg="5"] .pb-seg-cell:nth-child(-n + 5) {
background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
border-color: #34d399;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.pb-seg[data-pb-seg="1"] .pb-seg-cell:nth-child(-n + 1)::after,
.pb-seg[data-pb-seg="2"] .pb-seg-cell:nth-child(-n + 2)::after,
.pb-seg[data-pb-seg="3"] .pb-seg-cell:nth-child(-n + 3)::after,
.pb-seg[data-pb-seg="4"] .pb-seg-cell:nth-child(-n + 4)::after,
.pb-seg[data-pb-seg="5"] .pb-seg-cell:nth-child(-n + 5)::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 40%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
}
.pb-seg-value {
font-size: 12px;
color: #6ee7b7;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.04em;
}