How to Build a Custom Status Dashboard in Confluence

Project status pages in Confluence often end up as paragraphs of text that nobody reads. A wall of prose with a last-updated date from three weeks ago doesn't communicate project health — it communicates that someone was busy when they wrote it.

A visual status dashboard that shows RAG indicators, progress percentages, and days until key milestones is faster to read and easier to maintain. This guide walks through building one using HTML Macro for Confluence.

What We're Building

A status dashboard with four components:

RAG status cards — one per workstream, color-coded by health
Progress bars — percentage complete for each initiative
Milestone countdown — days until the next key date
Metric tiles — key numbers at a glance

Each component is a separate HTML Macro on the page. You can use all four or just the ones that fit your context.

Component 1 — RAG Status Cards

A row of status cards, one per workstream. Color-coded: green = on track, amber = at risk, red = blocked.

<div style="display:flex; gap:16px; flex-wrap:wrap; font-family:sans-serif;">

  <div style="flex:1; min-width:180px; padding:20px; border-radius:12px; background:#f0fdf4; border:1px solid #86efac;">
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#15803d; margin-bottom:8px;">Backend API</div>
    <div style="display:flex; align-items:center; gap:8px;">
      <div style="width:12px; height:12px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e88;"></div>
      <span style="font-size:15px; font-weight:700; color:#1e293b;">On Track</span>
    </div>
    <div style="margin-top:8px; font-size:13px; color:#64748b;">Sprint 3 of 4 complete</div>
  </div>

  <div style="flex:1; min-width:180px; padding:20px; border-radius:12px; background:#fffbeb; border:1px solid #fcd34d;">
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#92400e; margin-bottom:8px;">Mobile App</div>
    <div style="display:flex; align-items:center; gap:8px;">
      <div style="width:12px; height:12px; border-radius:50%; background:#f59e0b; box-shadow:0 0 6px #f59e0b88;"></div>
      <span style="font-size:15px; font-weight:700; color:#1e293b;">At Risk</span>
    </div>
    <div style="margin-top:8px; font-size:13px; color:#64748b;">Design review delayed 3 days</div>
  </div>

  <div style="flex:1; min-width:180px; padding:20px; border-radius:12px; background:#fef2f2; border:1px solid #fca5a5;">
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#b91c1c; margin-bottom:8px;">Integrations</div>
    <div style="display:flex; align-items:center; gap:8px;">
      <div style="width:12px; height:12px; border-radius:50%; background:#ef4444; box-shadow:0 0 6px #ef444488;"></div>
      <span style="font-size:15px; font-weight:700; color:#1e293b;">Blocked</span>
    </div>
    <div style="margin-top:8px; font-size:13px; color:#64748b;">Waiting on vendor API access</div>
  </div>

</div>

To update a status: change #22c55e → #f59e0b → #ef4444 on both the dot color and the card background/border colors, and update the label and note text.

Component 2 — Progress Bars

Visual progress indicators for each initiative. The percentage is shown as a filled bar with a label.

<div style="font-family:sans-serif; max-width:560px;">

  <div style="margin-bottom:18px;">
    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
      <span style="font-size:14px; font-weight:600; color:#1e293b;">Backend API</span>
      <span style="font-size:14px; font-weight:700; color:#6366f1;">75%</span>
    </div>
    <div style="background:#e2e8f0; border-radius:99px; height:8px;">
      <div style="background:#6366f1; width:75%; height:8px; border-radius:99px;"></div>
    </div>
  </div>

  <div style="margin-bottom:18px;">
    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
      <span style="font-size:14px; font-weight:600; color:#1e293b;">Mobile App</span>
      <span style="font-size:14px; font-weight:700; color:#f59e0b;">48%</span>
    </div>
    <div style="background:#e2e8f0; border-radius:99px; height:8px;">
      <div style="background:#f59e0b; width:48%; height:8px; border-radius:99px;"></div>
    </div>
  </div>

  <div style="margin-bottom:18px;">
    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
      <span style="font-size:14px; font-weight:600; color:#1e293b;">Integrations</span>
      <span style="font-size:14px; font-weight:700; color:#ef4444;">20%</span>
    </div>
    <div style="background:#e2e8f0; border-radius:99px; height:8px;">
      <div style="background:#ef4444; width:20%; height:8px; border-radius:99px;"></div>
    </div>
  </div>

</div>

To update: change the width percentage on the filled div and the number in the label. Match the bar color to the RAG status from Component 1.

Component 3 — Milestone Countdown

A JavaScript countdown to the next key date.

<div style="font-family:sans-serif; display:inline-flex; align-items:center; gap:24px; padding:20px 28px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px;">
  <div>
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#64748b; margin-bottom:4px;">Launch Date</div>
    <div style="font-size:14px; color:#1e293b; font-weight:500;">August 15, 2026</div>
  </div>
  <div style="display:flex; gap:16px; text-align:center;">
    <div>
      <div id="cd-days" style="font-size:40px; font-weight:800; color:#1e293b; line-height:1;">--</div>
      <div style="font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; margin-top:3px;">Days</div>
    </div>
    <div style="font-size:32px; color:#e2e8f0; font-weight:300; padding-top:4px;">:</div>
    <div>
      <div id="cd-hours" style="font-size:40px; font-weight:800; color:#1e293b; line-height:1;">--</div>
      <div style="font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; margin-top:3px;">Hours</div>
    </div>
  </div>
</div>

<script>
  var target = new Date("2026-08-15T09:00:00");
  function tick() {
    var diff = target - new Date();
    if (diff <= 0) {
      document.getElementById("cd-days").textContent = "0";
      document.getElementById("cd-hours").textContent = "0";
      return;
    }
    document.getElementById("cd-days").textContent = Math.floor(diff / 86400000);
    document.getElementById("cd-hours").textContent = Math.floor((diff % 86400000) / 3600000);
  }
  tick();
  setInterval(tick, 60000);
</script>

Change the date string in new Date("2026-08-15T09:00:00") to your actual milestone date.

Component 4 — Metric Tiles

Key numbers at a glance — open issues, completed stories, team size, or any other project metric.

<div style="display:flex; gap:16px; flex-wrap:wrap; font-family:sans-serif;">

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#6366f1;">34</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Issues Closed</div>
  </div>

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#22c55e;">12</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Open Bugs</div>
  </div>

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#f59e0b;">3</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Blocked Items</div>
  </div>

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#1e293b;">8</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Team Members</div>
  </div>

</div>

To update: change the number inside the large div and the label below it. Update the color to reflect the health of the metric if relevant (green for good, amber for concerning, red for problem).

Putting It Together

On the Confluence page, add four HTML Macro blocks stacked vertically:

RAG Status Cards at the top
Metric Tiles below
Progress Bars in the middle
Milestone Countdown at the bottom

Add a native Confluence "Last Updated" text or use the @date mention to timestamp the page. This tells readers whether the data is current.

Weekly update workflow: At the start of each week, open the page, click Edit, and update the RAG color/label in each card, the progress bar percentages, and the metric numbers. It takes 5–10 minutes and the page communicates project health clearly to anyone who opens it.

Install HTML Macro for Confluence — free on the Atlassian Marketplace