Service Status Dots
A status-page list where each colored dot pulses with its service state — hovering any row reveals an uptime bar history (30 days, color-coded), live metrics (uptime, latency, throughput), and the most recent incident summary. Built for SaaS status pages, infrastructure dashboards, on-call surfaces.
Service Status Dots the 8th of 21 designs in the 21 CSS Tooltips 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="svc-stage">
<div class="svc-inner">
<div class="svc-row-wrap">
<div class="svc-row">
<span class="svc-dot svc-ok svc-pulse"></span>
<span class="svc-name">API Gateway</span>
<span class="svc-pct">99.98%</span>
</div>
<span class="svc-tip">
<span class="svc-tip-head">
<span class="svc-tip-dot" style="background:#3fb950"></span>
<span class="svc-tip-name">API Gateway</span>
<span class="svc-badge svc-badge-ok">Operational</span>
</span>
<span class="svc-bars-label">30-day uptime</span>
<span class="svc-bars">
<span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:80%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
</span>
<span class="svc-metrics">
<span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">99.98%</span></span>
<span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">38ms</span></span>
<span class="svc-met"><span class="svc-met-label">Req/min</span><span class="svc-met-val">12.4k</span></span>
</span>
<span class="svc-incident">Last incident: <strong>Feb 14 · 18 min partial degradation</strong> — elevated error rates on /auth endpoints. Resolved.</span>
</span>
</div>
<div class="svc-row-wrap">
<div class="svc-row">
<span class="svc-dot svc-ok svc-pulse"></span>
<span class="svc-name">Auth Service</span>
<span class="svc-pct">100.00%</span>
</div>
<span class="svc-tip">
<span class="svc-tip-head">
<span class="svc-tip-dot" style="background:#3fb950"></span>
<span class="svc-tip-name">Auth Service</span>
<span class="svc-badge svc-badge-ok">Operational</span>
</span>
<span class="svc-bars-label">30-day uptime</span>
<span class="svc-bars">
<span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
</span>
<span class="svc-metrics">
<span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">100%</span></span>
<span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">18ms</span></span>
<span class="svc-met"><span class="svc-met-label">Token/min</span><span class="svc-met-val">84k</span></span>
</span>
<span class="svc-incident">No incidents in the last 90 days.</span>
</span>
</div>
<div class="svc-row-wrap">
<div class="svc-row">
<span class="svc-dot svc-ok svc-pulse"></span>
<span class="svc-name">PostgreSQL Primary</span>
<span class="svc-pct">99.94%</span>
</div>
<span class="svc-tip">
<span class="svc-tip-head">
<span class="svc-tip-dot" style="background:#3fb950"></span>
<span class="svc-tip-name">PostgreSQL Primary</span>
<span class="svc-badge svc-badge-ok">Operational</span>
</span>
<span class="svc-bars-label">30-day uptime</span>
<span class="svc-bars">
<span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#f85149;height:40%"></span><span class="svc-bar" style="background:#d29922;height:70%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
</span>
<span class="svc-metrics">
<span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">99.94%</span></span>
<span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">6ms</span></span>
<span class="svc-met"><span class="svc-met-label">Conns</span><span class="svc-met-val">142/500</span></span>
</span>
<span class="svc-incident">Last incident: <strong>Mar 2 · 34 min outage</strong> — connection pool exhaustion during traffic spike. Failover to replica triggered.</span>
</span>
</div>
<div class="svc-row-wrap">
<div class="svc-row">
<span class="svc-dot svc-warn"></span>
<span class="svc-name">Email Delivery</span>
<span class="svc-pct">98.42%</span>
</div>
<span class="svc-tip">
<span class="svc-tip-head">
<span class="svc-tip-dot" style="background:#d29922"></span>
<span class="svc-tip-name">Email Delivery</span>
<span class="svc-badge svc-badge-warn">Degraded</span>
</span>
<span class="svc-bars-label">30-day uptime</span>
<span class="svc-bars">
<span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:55%"></span><span class="svc-bar" style="background:#d29922;height:50%"></span><span class="svc-bar" style="background:#f85149;height:30%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#d29922;height:55%"></span><span class="svc-bar" style="background:#d29922;height:65%"></span><span class="svc-bar" style="background:#d29922;height:58%"></span><span class="svc-bar" style="background:#d29922;height:62%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#d29922;height:57%"></span>
</span>
<span class="svc-metrics">
<span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-warn">98.42%</span></span>
<span class="svc-met"><span class="svc-met-label">Delivery</span><span class="svc-met-val svc-met-warn">91.3%</span></span>
<span class="svc-met"><span class="svc-met-label">Avg delay</span><span class="svc-met-val svc-met-warn">340ms</span></span>
</span>
<span class="svc-incident">Active: <strong>Elevated bounce rates on Gmail / Yahoo</strong> — IP reputation issue with third-party relay. Investigation ongoing since May 11.</span>
</span>
</div>
</div>
</div> .svc-stage {
background: #0d1117;
/* Right room — status detail tooltip pops to the RIGHT of each row,
~280px wide. Without big right padding the tip would be cut off
by .cf-stage's overflow:hidden on the gallery card. */
padding: 36px 320px 36px 28px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.svc-inner {
max-width: 440px;
margin: 0 auto;
}
.svc-row-wrap {
position: relative;
}
.svc-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
cursor: help;
}
.svc-row-wrap:last-child .svc-row { border-bottom: none; }
.svc-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.svc-ok { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.5); }
.svc-warn { background: #d29922; box-shadow: 0 0 6px rgba(210, 153, 34, 0.5); }
.svc-down { background: #f85149; box-shadow: 0 0 6px rgba(248, 81, 73, 0.5); }
.svc-pulse { animation: svc-pulse-anim 2.5s ease-in-out infinite; }
@keyframes svc-pulse-anim {
0%, 100% { box-shadow: 0 0 6px rgba(63, 185, 80, 0.5); }
50% { box-shadow: 0 0 14px rgba(63, 185, 80, 0.8); }
}
.svc-name {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.7);
flex: 1;
letter-spacing: 0.02em;
}
.svc-pct {
font-size: 11px;
color: rgba(255, 255, 255, 0.25);
}
.svc-tip {
position: absolute;
left: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(6px);
width: 280px;
background: #161b22;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 9px;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
z-index: 30;
overflow: hidden;
display: block;
text-align: left;
}
.svc-row-wrap:hover .svc-tip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
transition-delay: 0s;
}
.svc-tip-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-tip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.svc-tip-name {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.85);
flex: 1;
}
.svc-badge {
font-size: 9px;
padding: 2px 7px;
border-radius: 20px;
letter-spacing: 0.06em;
font-weight: 500;
}
.svc-badge-ok { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.25); }
.svc-badge-warn { background: rgba(210, 153, 34, 0.15); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.25); }
.svc-badge-down { background: rgba(248, 81, 73, 0.15); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.25); }
.svc-bars-label {
display: block;
padding: 10px 14px 5px;
font-size: 8px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.svc-bars {
display: flex;
gap: 2px;
align-items: flex-end;
height: 34px;
padding: 0 14px 10px;
}
.svc-bar {
flex: 1;
border-radius: 1px;
min-height: 4px;
display: block;
}
.svc-metrics {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-met {
display: block;
padding: 10px 13px;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-met:last-child { border-right: none; }
.svc-met-label {
display: block;
font-size: 7px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 4px;
}
.svc-met-val {
display: block;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.7);
}
.svc-met-ok { color: #3fb950; }
.svc-met-warn { color: #d29922; }
.svc-met-down { color: #f85149; }
.svc-incident {
display: block;
padding: 9px 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 10px;
color: rgba(255, 255, 255, 0.25);
line-height: 1.5;
font-family: 'Inter', system-ui, sans-serif;
}
.svc-incident strong {
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}