Bar Growth
Animated horizontal bars that grow to their target widths with staggered delays for dynamic data dashboard presentations. Ideal for stats pages, analytics dashboards, or comparison charts.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
barchartgrowthdatavisualization
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
Animated bars that grow to their target values for dynamic data dashboard presentations.
CSS
css
.chart { width: 280px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.row .label { width: 60px; font-size: 12px; color: #71717a; }
.row .bar-wrap { flex: 1; height: 14px; background: #27272a; border-radius: 4px; overflow: hidden; }
.row .bar { height: 100%; background: #3b82f6; border-radius: 4px; width: 0; animation: grow 0.6s ease-out forwards; }
.row .bar:nth-child(1){animation-delay:0.1s}.row:nth-child(2) .bar{animation-delay:0.2s}.row:nth-child(3) .bar{animation-delay:0.3s}
@keyframes grow { to { width: var(--w); } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="chart"><div class="row"><span class="label">A</span><div class="bar-wrap"><div class="bar" style="--w:70%"></div></div></div><div class="row"><span class="label">B</span><div class="bar-wrap"><div class="bar" style="--w:45%"></div></div></div><div class="row"><span class="label">C</span><div class="bar-wrap"><div class="bar" style="--w:90%"></div></div></div></div>Full Source
html
<!DOCTYPE html>
<html><head><style>
.chart { width: 280px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.row .label { width: 60px; font-size: 12px; color: #71717a; }
.row .bar-wrap { flex: 1; height: 14px; background: #27272a; border-radius: 4px; overflow: hidden; }
.row .bar { height: 100%; background: #3b82f6; border-radius: 4px; width: 0; animation: grow 0.6s ease-out forwards; }
.row .bar:nth-child(1){animation-delay:0.1s}.row:nth-child(2) .bar{animation-delay:0.2s}.row:nth-child(3) .bar{animation-delay:0.3s}
@keyframes grow { to { width: var(--w); } }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body>
<div class="chart"><div class="row"><span class="label">A</span><div class="bar-wrap"><div class="bar" style="--w:70%"></div></div></div><div class="row"><span class="label">B</span><div class="bar-wrap"><div class="bar" style="--w:45%"></div></div></div><div class="row"><span class="label">C</span><div class="bar-wrap"><div class="bar" style="--w:90%"></div></div></div></div>
</body></html>