Deployment Concurrency
CSSThree 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.
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;
}
}