Pulsar
Radar sweep rotating around central hub sequentially verifying six replica nodes as healthyhealthmonitorOKOKOKOKOKOKreplicas6/6

Deployment Health Check

CSS

A radar sweep rotates around a central hub, sequentially illuminating six peripheral replica nodes with checkmark confirmations and OK labels as each is verified healthy.

Tier
CSS
Dependencies
None
Duration
13.4 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
loopringpulseui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
Radar sweep rotating around central hub sequentially verifying six replica nodes as healthyhealthmonitorOKOKOKOKOKOKreplicas6/6
CSS tier
Static vector
Deployment Health Check, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-health-check-title" class="pulsar pulsar-deploy-health-check" data-pulsar="deploy-health-check" role="img" viewBox="0 0 160 96"><title id="deploy-health-check-title">Radar sweep rotating around central hub sequentially verifying six replica nodes as healthy</title><g fill="currentColor" font-family="monospace" font-size="4" opacity=".4"><text x="73" y="49">health</text><text x="71" y="54">monitor</text></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><circle cx="80" cy="50" r="8"></circle><circle cx="80" cy="50" r="18"></circle><circle cx="80" cy="50" r="30"></circle><circle cx="80" cy="50" r="6"></circle></g><circle id="deploy-health-check-cf" cx="80" cy="50" r="6" fill="currentColor" opacity=".06"></circle><circle id="deploy-health-check-cr" cx="80" cy="50" r="6" fill="none" stroke="currentColor" stroke-width="1" opacity=".4"></circle><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".3"><line x1="80" x2="80" y1="44" y2="26"></line><line x1="86" x2="101" y1="46" y2="38"></line><line x1="86" x2="101" y1="54" y2="62"></line><line x1="80" x2="80" y1="56" y2="74"></line><line x1="74" x2="59" y1="54" y2="62"></line><line x1="74" x2="59" y1="46" y2="38"></line><circle cx="80" cy="22" r="4"></circle><circle cx="104" cy="36" r="4"></circle><circle cx="104" cy="64" r="4"></circle><circle cx="80" cy="78" r="4"></circle><circle cx="56" cy="64" r="4"></circle><circle cx="56" cy="36" r="4"></circle></g><g id="deploy-health-check-n0" opacity="0"><circle cx="80" cy="22" r="4" fill="none" stroke="currentColor"></circle><circle cx="80" cy="22" r="3" fill="currentColor" opacity=".5"></circle><text x="83" y="19" fill="currentColor" font-family="monospace" font-size="5" font-weight="700">OK</text></g><g id="deploy-health-check-n1" opacity="0"><circle cx="104" cy="36" r="4" fill="none" stroke="currentColor"></circle><circle cx="104" cy="36" r="3" fill="currentColor" opacity=".5"></circle><text x="108" y="34" fill="currentColor" font-family="monospace" font-size="5" font-weight="700">OK</text></g><g id="deploy-health-check-n2" opacity="0"><circle cx="104" cy="64" r="4" fill="none" stroke="currentColor"></circle><circle cx="104" cy="64" r="3" fill="currentColor" opacity=".5"></circle><text x="108" y="62" fill="currentColor" font-family="monospace" font-size="5" font-weight="700">OK</text></g><g id="deploy-health-check-n3" opacity="0"><circle cx="80" cy="78" r="4" fill="none" stroke="currentColor"></circle><circle cx="80" cy="78" r="3" fill="currentColor" opacity=".5"></circle><text x="83" y="76" fill="currentColor" font-family="monospace" font-size="5" font-weight="700">OK</text></g><g id="deploy-health-check-n4" opacity="0"><circle cx="56" cy="64" r="4" fill="none" stroke="currentColor"></circle><circle cx="56" cy="64" r="3" fill="currentColor" opacity=".5"></circle><text x="43" y="62" fill="currentColor" font-family="monospace" font-size="5" font-weight="700">OK</text></g><g id="deploy-health-check-n5" opacity="0"><circle cx="56" cy="36" r="4" fill="none" stroke="currentColor"></circle><circle cx="56" cy="36" r="3" fill="currentColor" opacity=".5"></circle><text x="40" y="34" fill="currentColor" font-family="monospace" font-size="5" font-weight="700">OK</text></g><line id="deploy-health-check-sw" x1="80" x2="80" y1="50" y2="22" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1" opacity=".7"></line><g fill="currentColor" font-family="monospace"><text x="120" y="84" font-size="4" opacity=".4">replicas</text><text id="deploy-health-check-ct" x="120" y="90" font-size="5" font-weight="700" opacity=".8">6/6</text></g></svg>

animation.css

.pulsar-deploy-health-check {
  --pulsar-accent: currentColor;
}

.pulsar-deploy-health-check #deploy-health-check-sw,
.pulsar-deploy-health-check #deploy-health-check-cr {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-health-check #deploy-health-check-cf,
.pulsar-deploy-health-check #deploy-health-check-ct {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-health-check #deploy-health-check-n0,
.pulsar-deploy-health-check #deploy-health-check-n1,
.pulsar-deploy-health-check #deploy-health-check-n2,
.pulsar-deploy-health-check #deploy-health-check-n3,
.pulsar-deploy-health-check #deploy-health-check-n4,
.pulsar-deploy-health-check #deploy-health-check-n5 {
  color: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-health-check #deploy-health-check-sw {
  transform-origin: 80px 50px;
  animation: deploy-health-check-rot 7200ms linear infinite;
}

@keyframes deploy-health-check-rot {
  to {
    transform: rotate(360deg);
  }
}

.pulsar-deploy-health-check #deploy-health-check-cf {
  animation: deploy-health-check-cp 7200ms ease-in-out infinite;
}

@keyframes deploy-health-check-cp {
  0%,
  100% {
    opacity: 0.06;
  }
  50% {
    opacity: 0.18;
  }
}

.pulsar-deploy-health-check #deploy-health-check-n0 {
  animation: deploy-health-check-node 7200ms 200ms ease-out infinite;
}
.pulsar-deploy-health-check #deploy-health-check-n1 {
  animation: deploy-health-check-node 7200ms 1400ms ease-out infinite;
}
.pulsar-deploy-health-check #deploy-health-check-n2 {
  animation: deploy-health-check-node 7200ms 2600ms ease-out infinite;
}
.pulsar-deploy-health-check #deploy-health-check-n3 {
  animation: deploy-health-check-node 7200ms 3800ms ease-out infinite;
}
.pulsar-deploy-health-check #deploy-health-check-n4 {
  animation: deploy-health-check-node 7200ms 5000ms ease-out infinite;
}
.pulsar-deploy-health-check #deploy-health-check-n5 {
  animation: deploy-health-check-node 7200ms 6200ms ease-out infinite;
}

@keyframes deploy-health-check-node {
  0%,
  80%,
  100% {
    opacity: 0;
  }
  3%,
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-health-check * {
    animation: none !important;
  }
  .pulsar-deploy-health-check #deploy-health-check-n0,
  .pulsar-deploy-health-check #deploy-health-check-n1,
  .pulsar-deploy-health-check #deploy-health-check-n2,
  .pulsar-deploy-health-check #deploy-health-check-n3,
  .pulsar-deploy-health-check #deploy-health-check-n4,
  .pulsar-deploy-health-check #deploy-health-check-n5 {
    opacity: 1;
  }
}

From this family15 in Deploy

See the family