Pulsar
Three concurrent worker progress bars growing at staggered rates toward a shared capacity limitconcurrent workers3×limlimlimworker-Aworker-Bworker-C

Deployment Concurrency

CSS

Three horizontal progress bars grow at staggered rates toward a shared capacity limit, flash on reset, and rewind — visualising concurrent worker contention and limit-aware scheduling.

Tier
CSS
Dependencies
None
Duration
26.7 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
deploy
Tags
loopprogressbarsui

Companion assets

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

Animated
Three concurrent worker progress bars growing at staggered rates toward a shared capacity limitconcurrent workers3×limlimlimworker-Aworker-Bworker-C
CSS tier
Static vector
Deployment Concurrency, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-concurrency-title" class="pulsar pulsar-deploy-concurrency" data-pulsar="deploy-concurrency" role="img" viewBox="0 0 160 96"><title id="deploy-concurrency-title">Three concurrent worker progress bars growing at staggered rates toward a shared capacity limit</title><g fill="currentColor" font-family="monospace"><text x="10" y="11" font-size="5" opacity=".55">concurrent workers</text><text id="deploy-concurrency-total" x="122" y="11" font-size="5.5" font-weight="700" opacity=".8">3×</text></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".3"><line x1="138" x2="138" y1="20" y2="30"></line><line x1="138" x2="138" y1="46" y2="56"></line><line x1="138" x2="138" y1="72" y2="82"></line></g><g fill="currentColor" font-family="monospace" font-size="4" opacity=".4"><text x="140" y="27">lim</text><text x="140" y="53">lim</text><text x="140" y="79">lim</text></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><line x1="45" x2="45" y1="16" y2="84"></line><line x1="80" x2="80" y1="16" y2="84"></line><line x1="115" x2="115" y1="16" y2="84"></line></g><g fill="currentColor" font-family="monospace" font-size="4" opacity=".4"><text x="10" y="24">worker-A</text><text x="10" y="50">worker-B</text><text x="10" y="76">worker-C</text></g><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="5" opacity=".1"><line x1="10" x2="138" y1="26" y2="26"></line><line x1="10" x2="138" y1="52" y2="52"></line><line x1="10" x2="138" y1="78" y2="78"></line></g><line id="deploy-concurrency-barA" x1="10" x2="10" y1="26" y2="26" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="5" opacity=".9"></line><line id="deploy-concurrency-barB" x1="10" x2="10" y1="52" y2="52" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="5" opacity=".9"></line><line id="deploy-concurrency-barC" x1="10" x2="10" y1="78" y2="78" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="5" opacity=".9"></line><circle id="deploy-concurrency-rstA" cx="138" cy="26" r="3" fill="currentColor" opacity="0"></circle><circle id="deploy-concurrency-rstB" cx="138" cy="52" r="3" fill="currentColor" opacity="0"></circle><circle id="deploy-concurrency-rstC" cx="138" cy="78" r="3" fill="currentColor" opacity="0"></circle></svg>

animation.css

.pulsar-deploy-concurrency {
  --pulsar-accent: currentColor;
}

/* Accent elements */
.pulsar-deploy-concurrency #deploy-concurrency-total,
.pulsar-deploy-concurrency #deploy-concurrency-barA,
.pulsar-deploy-concurrency #deploy-concurrency-barB,
.pulsar-deploy-concurrency #deploy-concurrency-barC {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-concurrency #deploy-concurrency-rstA,
.pulsar-deploy-concurrency #deploy-concurrency-rstB,
.pulsar-deploy-concurrency #deploy-concurrency-rstC {
  fill: var(--pulsar-accent, currentColor);
}

/* ── Bar A: 10s cycle ── */
.pulsar-deploy-concurrency #deploy-concurrency-barA {
  animation: deploy-concurrency-growA 10000ms 0ms ease-in-out infinite;
}

@keyframes deploy-concurrency-growA {
  0% {
    x2: 10;
    opacity: 0.9;
  }
  80% {
    x2: 138;
    opacity: 1;
  }
  85% {
    x2: 138;
    opacity: 0.3;
  }
  90% {
    x2: 10;
    opacity: 0.7;
  }
  100% {
    x2: 10;
    opacity: 0.9;
  }
}

/* ── Bar B: 14s cycle (slower) ── */
.pulsar-deploy-concurrency #deploy-concurrency-barB {
  animation: deploy-concurrency-growB 14000ms 1800ms ease-in-out infinite;
}

@keyframes deploy-concurrency-growB {
  0% {
    x2: 10;
    opacity: 0.9;
  }
  78% {
    x2: 138;
    opacity: 1;
  }
  82% {
    x2: 138;
    opacity: 0.3;
  }
  88% {
    x2: 10;
    opacity: 0.7;
  }
  100% {
    x2: 10;
    opacity: 0.9;
  }
}

/* ── Bar C: 8s cycle (fastest) ── */
.pulsar-deploy-concurrency #deploy-concurrency-barC {
  animation: deploy-concurrency-growC 8000ms 3500ms ease-in-out infinite;
}

@keyframes deploy-concurrency-growC {
  0% {
    x2: 10;
    opacity: 0.9;
  }
  75% {
    x2: 138;
    opacity: 1;
  }
  80% {
    x2: 138;
    opacity: 0.3;
  }
  87% {
    x2: 10;
    opacity: 0.7;
  }
  100% {
    x2: 10;
    opacity: 0.9;
  }
}

/* ── Reset pulses ── */
.pulsar-deploy-concurrency #deploy-concurrency-rstA {
  animation: deploy-concurrency-rst 10000ms 8100ms ease-out infinite;
}
.pulsar-deploy-concurrency #deploy-concurrency-rstB {
  animation: deploy-concurrency-rst 14000ms 12700ms ease-out infinite;
}
.pulsar-deploy-concurrency #deploy-concurrency-rstC {
  animation: deploy-concurrency-rst 8000ms 9800ms ease-out infinite;
}

@keyframes deploy-concurrency-rst {
  0% {
    opacity: 0;
    r: 3;
  }
  5% {
    opacity: 0.8;
    r: 5;
  }
  20% {
    opacity: 0.4;
    r: 3;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ── Total counter pulse ── */
.pulsar-deploy-concurrency #deploy-concurrency-total {
  animation: deploy-concurrency-totalpulse 6000ms 0ms ease-in-out infinite;
}

@keyframes deploy-concurrency-totalpulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-concurrency * {
    animation: none !important;
  }
  .pulsar-deploy-concurrency #deploy-concurrency-barA,
  .pulsar-deploy-concurrency #deploy-concurrency-barB,
  .pulsar-deploy-concurrency #deploy-concurrency-barC {
    x2: 138;
    opacity: 1;
  }
}

From this family15 in Deploy

See the family