Horizontal roadmap timeline with progress bars

Roadmap/gantt visual for a planning-tool features page. Bar widths are illustrative, wire to real milestone data if this ever leaves marketing and becomes a real product view.

pattern · linear.app composite animation-scrollvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="ltr-wrap">
  <div class="ltr-months">
    <span>Mar</span><span>Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span>
  </div>
  <div class="ltr-row">
    <span class="ltr-label">UI Refresh</span>
    <div class="ltr-track"><div class="ltr-bar ltr-bar-fill" style="left:4%;width:30%">Core screens</div></div>
  </div>
  <div class="ltr-row">
    <span class="ltr-label">Split fares</span>
    <div class="ltr-track"><div class="ltr-bar ltr-bar-beta" style="left:30%;width:26%">Public Beta</div></div>
  </div>
  <div class="ltr-row">
    <span class="ltr-label">Autonomy status</span>
    <div class="ltr-track"><div class="ltr-bar ltr-bar-alpha" style="left:50%;width:18%">Alpha</div></div>
  </div>
  <div class="ltr-row">
    <span class="ltr-label">Telemetry</span>
    <div class="ltr-track"><div class="ltr-bar ltr-bar-ga" style="left:64%;width:32%">Beta &rarr; GA</div></div>
  </div>
</div>

Block id: linear-timeline-roadmapvanilla · code-required

More composite blocks

2x2 benefit grid with embedded UI snippets

cal.com

Pricing feature comparison table with highlighted column

cal.com

Central-hub integration diagram

cal.com

Issue tracker card with live activity feed

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call