Pulsar
Eight cluster nodes voting towards a strict five-of-eight threshold line to reach quorum consensusquorum electionthreshold: 5/8 (62.5%)QUORUMmin: 5

Cluster Quorum

CSS

Eight distributed cluster nodes cast state votes towards a strict five-of-eight majority threshold line, confirming quorum with an illuminated status bar and threshold badge.

Tier
CSS
Dependencies
None
Duration
8.4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Sync and integration
Industries
IT services and infrastructure, Cross-industry
Style
Minimal line · light stroke
Set
cluster
Tags
loopprogressdotsui

Companion assets

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

Animated
Eight cluster nodes voting towards a strict five-of-eight threshold line to reach quorum consensusquorum electionthreshold: 5/8 (62.5%)QUORUMmin: 5
CSS tier
Static vector
Cluster Quorum, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="cluster-quorum-title" class="pulsar pulsar-cluster-quorum" data-pulsar="cluster-quorum" role="img" viewBox="0 0 160 96"><title id="cluster-quorum-title">Eight cluster nodes voting towards a strict five-of-eight threshold line to reach quorum consensus</title><g fill="currentColor" font-family="monospace"><text x="16" y="16" font-size="4.5" opacity=".5">quorum election</text><text x="16" y="24" font-size="4" opacity=".35">threshold: 5/8 (62.5%)</text><text id="cluster-quorum-badge" x="100" y="20" font-size="5" font-weight="700" opacity="0">QUORUM</text></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="16" x2="144" y1="52" y2="52"></line><line x1="16" x2="144" y1="40" y2="40" stroke-dasharray="2 3"></line><line x1="16" x2="144" y1="64" y2="64" stroke-dasharray="2 3"></line></g><line id="cluster-quorum-thresh" x1="96" x2="96" y1="32" y2="72" fill="none" stroke="currentColor" stroke-dasharray="2 2" stroke-width="1.2" opacity=".3"></line><text id="cluster-quorum-thresh-lbl" x="96" y="80" fill="currentColor" font-family="monospace" font-size="4" opacity=".4" text-anchor="middle">min: 5</text><g id="cluster-quorum-n1"><circle cx="20" cy="52" r="4.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="20" cy="52" r="2.2" fill="currentColor" opacity="0"></circle></g><g id="cluster-quorum-n2"><circle cx="36" cy="52" r="4.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="36" cy="52" r="2.2" fill="currentColor" opacity="0"></circle></g><g id="cluster-quorum-n3"><circle cx="52" cy="52" r="4.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="52" cy="52" r="2.2" fill="currentColor" opacity="0"></circle></g><g id="cluster-quorum-n4"><circle cx="68" cy="52" r="4.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="68" cy="52" r="2.2" fill="currentColor" opacity="0"></circle></g><g id="cluster-quorum-n5"><circle cx="84" cy="52" r="5" fill="none" stroke="currentColor" stroke-width="1.2"></circle><circle cx="84" cy="52" r="2.5" fill="currentColor" opacity="0"></circle></g><g opacity=".3"><circle cx="108" cy="52" r="4.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="124" cy="52" r="4.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="140" cy="52" r="4.5" fill="none" stroke="currentColor" stroke-width=".8"></circle></g><line id="cluster-quorum-bar" x1="20" x2="84" y1="52" y2="52" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line></svg>

animation.css

.pulsar-cluster-quorum {
  --pulsar-accent: currentColor;
}

.pulsar-cluster-quorum #cluster-quorum-bar,
.pulsar-cluster-quorum #cluster-quorum-thresh {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-quorum #cluster-quorum-badge,
.pulsar-cluster-quorum #cluster-quorum-thresh-lbl {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-quorum #cluster-quorum-n1 circle:last-child,
.pulsar-cluster-quorum #cluster-quorum-n2 circle:last-child,
.pulsar-cluster-quorum #cluster-quorum-n3 circle:last-child,
.pulsar-cluster-quorum #cluster-quorum-n4 circle:last-child,
.pulsar-cluster-quorum #cluster-quorum-n5 circle:last-child {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-quorum #cluster-quorum-n1 circle:last-child {
  animation: cluster-quorum-vote 6000ms 400ms ease-out infinite;
}
.pulsar-cluster-quorum #cluster-quorum-n2 circle:last-child {
  animation: cluster-quorum-vote 6000ms 800ms ease-out infinite;
}
.pulsar-cluster-quorum #cluster-quorum-n3 circle:last-child {
  animation: cluster-quorum-vote 6000ms 1200ms ease-out infinite;
}
.pulsar-cluster-quorum #cluster-quorum-n4 circle:last-child {
  animation: cluster-quorum-vote 6000ms 1600ms ease-out infinite;
}
.pulsar-cluster-quorum #cluster-quorum-n5 circle:last-child {
  animation: cluster-quorum-vote 6000ms 2000ms ease-out infinite;
}

@keyframes cluster-quorum-vote {
  0% {
    opacity: 0;
  }
  10%,
  65% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
  }
}

.pulsar-cluster-quorum #cluster-quorum-thresh {
  animation: cluster-quorum-th-flash 6000ms 2400ms ease-in-out infinite;
}

@keyframes cluster-quorum-th-flash {
  0% {
    opacity: 0.3;
    stroke-width: 1.2;
  }
  10%,
  45% {
    opacity: 1;
    stroke-width: 2;
  }
  75%,
  100% {
    opacity: 0.3;
    stroke-width: 1.2;
  }
}

.pulsar-cluster-quorum #cluster-quorum-badge {
  animation: cluster-quorum-badge-reveal 6000ms 2400ms ease-out infinite;
}

@keyframes cluster-quorum-badge-reveal {
  0% {
    opacity: 0;
  }
  10%,
  55% {
    opacity: 1;
  }
  75%,
  100% {
    opacity: 0;
  }
}

.pulsar-cluster-quorum #cluster-quorum-bar {
  animation: cluster-quorum-bar-light 6000ms 2400ms ease-out infinite;
}

@keyframes cluster-quorum-bar-light {
  0% {
    opacity: 0;
  }
  10%,
  55% {
    opacity: 0.8;
  }
  75%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-cluster-quorum * {
    animation: none !important;
  }
  .pulsar-cluster-quorum #cluster-quorum-n1 circle:last-child,
  .pulsar-cluster-quorum #cluster-quorum-n2 circle:last-child,
  .pulsar-cluster-quorum #cluster-quorum-n3 circle:last-child,
  .pulsar-cluster-quorum #cluster-quorum-n4 circle:last-child,
  .pulsar-cluster-quorum #cluster-quorum-n5 circle:last-child {
    opacity: 1;
  }
  .pulsar-cluster-quorum #cluster-quorum-badge,
  .pulsar-cluster-quorum #cluster-quorum-bar {
    opacity: 1;
  }
}

From this family15 in Cluster

See the family