Segmented Power Bar

HTML_STRUCTURE

<div class='bh-load-v1-seg'><span></span><span></span><span></span><span class='off'></span></div>

CSS_STYLING

.bh-load-v1-seg { display: flex; gap: 4px; } .bh-load-v1-seg span { width: 8px; height: 20px; background: #fff; } .bh-load-v1-seg span.off { background: #111; border: 1px solid #222; } .bh-load-v1-seg span:not(.off) { animation: bh-v1-seg-flicker 0.1s infinite alternate; } @keyframes bh-v1-seg-flicker { to { opacity: 0.7; } }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.