Stacked Progress
Left-anchored trail with per-card progress bars and status pills. Built for product roadmaps, quarterly OKRs, and milestone trackers where each step carries a percentage and a "done / in progress / planned" state.
Stacked Progress the 17th of 24 designs in the 24 CSS Timeline Layouts 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="tl17-scene">
<div class="tl17-wrap">
<div class="tl17-track" aria-hidden="true"><div class="tl17-track-fill"></div></div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q1</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Jan — Mar 2025</span>
<span class="tl17-status tl17-done">Complete</span>
</div>
<h3 class="tl17-name">Core Infrastructure</h3>
<p class="tl17-text">Database sharding, API gateway redesign, and global CDN rollout completed 12 days ahead of schedule.</p>
<div class="tl17-progress-label"><span>Infrastructure</span><span>100%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
</div>
</div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q2</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Apr — Jun 2025</span>
<span class="tl17-status tl17-done">Complete</span>
</div>
<h3 class="tl17-name">Mobile Application</h3>
<p class="tl17-text">iOS and Android apps launched simultaneously. 4.8-star App Store rating within the first month of public availability.</p>
<div class="tl17-progress-label"><span>Mobile</span><span>100%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
</div>
</div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q3</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Jul — Sep 2025</span>
<span class="tl17-status tl17-active">In Progress</span>
</div>
<h3 class="tl17-name">AI Integration Layer</h3>
<p class="tl17-text">Embedding the new intelligence pipeline into all major product surfaces. Search, recommendations, and auto-summarization on track.</p>
<div class="tl17-progress-label"><span>AI Layer</span><span>67%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:67%"></div></div>
</div>
</div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q4</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Oct — Dec 2025</span>
<span class="tl17-status tl17-plan">Planned</span>
</div>
<h3 class="tl17-name">Enterprise Platform</h3>
<p class="tl17-text">SSO, audit logging, custom data residency, and dedicated onboarding for Fortune 500 accounts entering the pipeline.</p>
<div class="tl17-progress-label"><span>Enterprise</span><span>12%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:12%"></div></div>
</div>
</div>
<div class="tl17-row tl17-last">
<div class="tl17-aside">
<div class="tl17-circle">Q1</div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Jan — Mar 2026</span>
<span class="tl17-status tl17-plan">Planned</span>
</div>
<h3 class="tl17-name">Global Expansion</h3>
<p class="tl17-text">Localization into 14 new markets, regional data centers in Southeast Asia and South America, and a dedicated partner ecosystem.</p>
<div class="tl17-progress-label"><span>Expansion</span><span>0%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:0%"></div></div>
</div>
</div>
</div>
</div> .tl17-scene {
--tl17-bg: #0d0d10;
--tl17-accent: #e05c1a;
background: var(--tl17-bg);
padding: 2.5rem 1.5rem;
font-family: 'Inter', system-ui, sans-serif;
}
.tl17-wrap {
max-width: 720px;
margin: 0 auto;
position: relative;
}
.tl17-track {
position: absolute;
left: 24px;
top: 0;
bottom: 0;
width: 2px;
background: rgba(255,255,255,0.06);
}
.tl17-track-fill {
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, var(--tl17-accent), rgba(224,92,26,0));
animation: tl17-track 2s ease forwards;
}
@keyframes tl17-track {
from { height: 0; }
to { height: 85%; }
}
.tl17-row {
display: flex;
gap: 1.5rem;
align-items: flex-start;
position: relative;
}
.tl17-aside {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
}
.tl17-circle {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(224,92,26,0.12);
border: 1px solid rgba(224,92,26,0.3);
display: flex;
align-items: center;
justify-content: center;
font-family: ui-monospace, monospace;
font-size: 12.5px;
font-weight: 500;
color: var(--tl17-accent);
flex-shrink: 0;
position: relative;
z-index: 2;
transition: background 0.3s, box-shadow 0.3s;
}
.tl17-row:hover .tl17-circle {
background: rgba(224,92,26,0.25);
box-shadow: 0 0 20px rgba(224,92,26,0.3);
}
.tl17-connector {
width: 2px;
flex: 1;
background: linear-gradient(to bottom, rgba(224,92,26,0.3), transparent);
min-height: 30px;
}
.tl17-card {
flex: 1;
margin-bottom: 1.5rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 1.25rem;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.tl17-row:hover .tl17-card {
background: rgba(255,255,255,0.07);
border-color: rgba(224,92,26,0.25);
transform: translateX(4px);
}
.tl17-last .tl17-card { margin-bottom: 0; }
.tl17-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.7rem;
}
.tl17-when {
font-family: ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 1.5px;
color: var(--tl17-accent);
text-transform: uppercase;
}
.tl17-status {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 0.2rem 0.55rem;
border-radius: 99px;
white-space: nowrap;
}
.tl17-done { background: rgba(26,122,74,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.tl17-active { background: rgba(224,92,26,0.2); color: var(--tl17-accent); border: 1px solid rgba(224,92,26,0.3); }
.tl17-plan { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }
.tl17-name {
font-size: 1rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.4rem;
}
.tl17-text {
font-size: 12.5px;
color: rgba(255,255,255,0.45);
line-height: 1.65;
margin: 0 0 0.9rem;
}
.tl17-progress-label {
display: flex;
justify-content: space-between;
font-family: ui-monospace, monospace;
font-size: 10px;
color: rgba(255,255,255,0.3);
margin-bottom: 0.35rem;
}
.tl17-progress-bar {
height: 3px;
background: rgba(255,255,255,0.07);
border-radius: 2px;
overflow: hidden;
}
.tl17-progress-fill {
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, var(--tl17-accent), #f97316);
transition: width 1s ease;
}
@media (prefers-reduced-motion: reduce) {
.tl17-track-fill { animation: none; height: 85%; }
}