Deployment Heartbeat
CSSLiveness-probe telemetry scanning three service instances: probe dots traverse a shared baseline, an ECG spike confirms each poll, and per-card readouts show replica counts and probe intervals.
- Tier
- CSS
- Dependencies
- None
- Duration
- 6.6 s, loops
- Categories
- Icons and micro-interactions, Data and progress
- Use cases
- Loading and waiting, Dashboards and reporting
- Industries
- SaaS and software, Cross-industry
- Style
- Technical · light stroke
- Set
- deploy
- Tags
- looppulselineui
Companion assets
The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.
Code
animation.svg
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-heartbeat-title" class="pulsar pulsar-deploy-heartbeat" data-pulsar="deploy-heartbeat" role="img" viewBox="0 0 160 96"><title id="deploy-heartbeat-title">Liveness-probe telemetry scanning three service instances with ECG spikes and replica counters</title><g fill="currentColor" font-family="monospace" font-size="4.5" opacity=".45"><text x="12" y="12">liveness-probe</text><text x="12" y="18" opacity=".35">interval: 10s</text><text id="deploy-heartbeat-svc" x="106" y="12">svc/api</text></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><line x1="12" x2="148" y1="20" y2="20"></line><line x1="12" x2="148" y1="36" y2="36"></line><line x1="12" x2="148" y1="52" y2="52"></line></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><rect width="40" height="28" x="10" y="59" rx="2"></rect><rect width="40" height="28" x="60" y="59" rx="2"></rect><rect width="40" height="28" x="110" y="59" rx="2"></rect></g><g fill="currentColor" font-family="monospace" font-size="4" opacity=".4"><text x="14" y="67">instance-0</text><text x="64" y="67">instance-1</text><text x="114" y="67">instance-2</text></g><line id="deploy-heartbeat-base" x1="16" x2="148" y1="36" y2="36" fill="none" stroke="currentColor" stroke-width=".5" opacity=".35"></line><g id="deploy-heartbeat-sig0" opacity="0"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" points="16,36 28,36 30,28 32,44 34,36 50,36"></polyline><circle cx="50" cy="36" r="2" fill="currentColor"></circle><text x="28" y="25" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">OK</text></g><g id="deploy-heartbeat-sig1" opacity="0"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" points="66,36 78,36 80,28 82,44 84,36 100,36"></polyline><circle cx="100" cy="36" r="2" fill="currentColor"></circle><text x="78" y="25" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">OK</text></g><g id="deploy-heartbeat-sig2" opacity="0"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" points="116,36 128,36 130,28 132,44 134,36 148,36"></polyline><circle cx="148" cy="36" r="2" fill="currentColor"></circle><text x="128" y="25" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">OK</text></g><g id="deploy-heartbeat-card0" opacity=".3"><rect width="24" height="3" x="13" y="70" fill="currentColor" opacity=".2" rx=".8"></rect><circle cx="38" cy="78" r="2.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><text x="14" y="83" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">1/1</text></g><g id="deploy-heartbeat-card1" opacity=".3"><rect width="24" height="3" x="63" y="70" fill="currentColor" opacity=".2" rx=".8"></rect><circle cx="88" cy="78" r="2.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><text x="64" y="83" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">1/1</text></g><g id="deploy-heartbeat-card2" opacity=".3"><rect width="24" height="3" x="113" y="70" fill="currentColor" opacity=".2" rx=".8"></rect><circle cx="138" cy="78" r="2.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><text x="114" y="83" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">1/1</text></g></svg>
animation.css
.pulsar-deploy-heartbeat {
--pulsar-accent: currentColor;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-svc,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig0,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig1,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig2,
.pulsar-deploy-heartbeat #deploy-heartbeat-card0,
.pulsar-deploy-heartbeat #deploy-heartbeat-card1,
.pulsar-deploy-heartbeat #deploy-heartbeat-card2 {
color: var(--pulsar-accent, currentColor);
}
.pulsar-deploy-heartbeat #deploy-heartbeat-svc {
fill: var(--pulsar-accent, currentColor);
animation: deploy-heartbeat-svc 4000ms ease-in-out infinite;
}
@keyframes deploy-heartbeat-svc {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.pulsar-deploy-heartbeat #deploy-heartbeat-sig0 {
animation: deploy-heartbeat-sig 4000ms 400ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-sig1 {
animation: deploy-heartbeat-sig 4000ms 1400ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-sig2 {
animation: deploy-heartbeat-sig 4000ms 2400ms ease-out infinite;
}
@keyframes deploy-heartbeat-sig {
0%,
75%,
100% {
opacity: 0;
}
5%,
50% {
opacity: 1;
}
}
.pulsar-deploy-heartbeat #deploy-heartbeat-card0 {
animation: deploy-heartbeat-card 4000ms 600ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-card1 {
animation: deploy-heartbeat-card 4000ms 1600ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-card2 {
animation: deploy-heartbeat-card 4000ms 2600ms ease-out infinite;
}
@keyframes deploy-heartbeat-card {
0%,
70%,
100% {
opacity: 0.3;
}
10%,
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-deploy-heartbeat * {
animation: none !important;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-sig0,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig1,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig2,
.pulsar-deploy-heartbeat #deploy-heartbeat-card0,
.pulsar-deploy-heartbeat #deploy-heartbeat-card1,
.pulsar-deploy-heartbeat #deploy-heartbeat-card2 {
opacity: 1;
}
}