Stacked Categories
A single bar split into multiple coloured segments — Documents, Photos, Apps, Free. Each segment's width is a CSS variable, with a legend below. Premium pattern for storage dashboards and budget breakdowns.
Stacked Categories the 10th 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-stack" role="img" aria-label="Storage usage breakdown">
<div class="pb-stack-head">
<strong>128 GB used</strong>
<span>of 256 GB</span>
</div>
<div class="pb-stack-rail">
<span class="pb-stack-seg s1" style="--w: 28%" aria-label="Documents 28%"></span>
<span class="pb-stack-seg s2" style="--w: 18%" aria-label="Photos 18%"></span>
<span class="pb-stack-seg s3" style="--w: 14%" aria-label="Apps 14%"></span>
<span class="pb-stack-seg s4" style="--w: 40%" aria-label="Free 40%"></span>
</div>
<ul class="pb-stack-legend">
<li class="s1"><i></i>Documents <em>36 GB</em></li>
<li class="s2"><i></i>Photos <em>23 GB</em></li>
<li class="s3"><i></i>Apps <em>18 GB</em></li>
<li class="s4"><i></i>Free <em>51 GB</em></li>
</ul>
</div> .pb-stack {
width: 260px;
display: grid;
gap: 10px;
font-family: system-ui, sans-serif;
}
.pb-stack-head {
display: flex;
align-items: baseline;
justify-content: space-between;
color: #f0eeff;
}
.pb-stack-head strong {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
}
.pb-stack-head span {
font-size: 12px;
color: #94a3b8;
}
.pb-stack-rail {
display: flex;
height: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 99px;
overflow: hidden;
gap: 2px;
padding: 0 1px;
}
.pb-stack-seg {
height: 100%;
border-radius: 99px;
transition: width 0.6s cubic-bezier(0.5, 0, 0.3, 1.2);
width: var(--w, 0%);
}
.pb-stack-seg.s1 {
background: linear-gradient(90deg, #6366f1, #818cf8);
}
.pb-stack-seg.s2 {
background: linear-gradient(90deg, #ec4899, #f472b6);
}
.pb-stack-seg.s3 {
background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}
.pb-stack-seg.s4 {
background: rgba(255, 255, 255, 0.12);
}
.pb-stack-legend {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
font-size: 11px;
color: #cbd5e1;
}
.pb-stack-legend li {
display: flex;
align-items: center;
gap: 6px;
}
.pb-stack-legend li i {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
}
.pb-stack-legend li.s1 i {
background: #818cf8;
}
.pb-stack-legend li.s2 i {
background: #f472b6;
}
.pb-stack-legend li.s3 i {
background: #2dd4bf;
}
.pb-stack-legend li.s4 i {
background: rgba(255, 255, 255, 0.3);
}
.pb-stack-legend em {
font-style: normal;
margin-left: auto;
color: #94a3b8;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
}