Cluster Scale Out
CSSA central cluster of three nodes expands outward along capacity tracks as two new flanking replica nodes provision and align with the existing grid.
- Tier
- CSS
- Dependencies
- None
- Duration
- 6 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Determinate progress
- Industries
- SaaS and software, IT services and infrastructure
- Style
- Minimal line · light stroke
- Set
- cluster
- Tags
- loopscalegriddots
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="cluster-scale-out-title" class="pulsar pulsar-cluster-scale-out" data-pulsar="cluster-scale-out" role="img" viewBox="0 0 160 96"><title id="cluster-scale-out-title">Central cluster expanding its topology outward as two replica nodes provision and align into the grid</title><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="24" x2="136" y1="48" y2="48"></line><line x1="24" x2="136" y1="34" y2="34" stroke-dasharray="2 3"></line><line x1="24" x2="136" y1="62" y2="62" stroke-dasharray="2 3"></line></g><path id="cluster-scale-out-bkt-left" fill="none" stroke="currentColor" stroke-width=".8" d="M48 38h-8v20h8" opacity=".3"></path><path id="cluster-scale-out-bkt-right" fill="none" stroke="currentColor" stroke-width=".8" d="M112 38h8v20h-8" opacity=".3"></path><line id="cluster-scale-out-bus" x1="64" x2="96" y1="48" y2="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" opacity=".4"></line><g id="cluster-scale-out-n-left"><circle cx="64" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="64" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-scale-out-n-center"><circle cx="80" cy="48" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="80" cy="48" r="2.2" fill="currentColor"></circle></g><g id="cluster-scale-out-n-right"><circle cx="96" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="96" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-scale-out-n-farleft" opacity="0"><circle cx="40" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="40" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-scale-out-n-farright" opacity="0"><circle cx="120" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="120" cy="48" r="2" fill="currentColor"></circle></g></svg>
animation.css
.pulsar-cluster-scale-out {
--pulsar-accent: currentColor;
}
.pulsar-cluster-scale-out #cluster-scale-out-bus,
.pulsar-cluster-scale-out #cluster-scale-out-bkt-left,
.pulsar-cluster-scale-out #cluster-scale-out-bkt-right {
stroke: var(--pulsar-accent, currentColor);
}
.pulsar-cluster-scale-out #cluster-scale-out-n-left circle:last-child,
.pulsar-cluster-scale-out #cluster-scale-out-n-center circle:last-child,
.pulsar-cluster-scale-out #cluster-scale-out-n-right circle:last-child,
.pulsar-cluster-scale-out #cluster-scale-out-n-farleft circle:last-child,
.pulsar-cluster-scale-out #cluster-scale-out-n-farright circle:last-child {
fill: var(--pulsar-accent, currentColor);
}
.pulsar-cluster-scale-out #cluster-scale-out-n-left {
animation: cluster-scale-out-left 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cluster-scale-out-left {
0%,
20% {
transform: translateX(0);
}
45%,
80% {
transform: translateX(-4px);
}
95%,
100% {
transform: translateX(0);
}
}
.pulsar-cluster-scale-out #cluster-scale-out-n-right {
animation: cluster-scale-out-right 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cluster-scale-out-right {
0%,
20% {
transform: translateX(0);
}
45%,
80% {
transform: translateX(4px);
}
95%,
100% {
transform: translateX(0);
}
}
.pulsar-cluster-scale-out #cluster-scale-out-bus {
transform-origin: 80px 48px;
animation: cluster-scale-out-bus-grow 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cluster-scale-out-bus-grow {
0%,
20% {
transform: scaleX(1);
opacity: 0.4;
}
45%,
80% {
transform: scaleX(2.5);
opacity: 0.8;
}
95%,
100% {
transform: scaleX(1);
opacity: 0.4;
}
}
.pulsar-cluster-scale-out #cluster-scale-out-n-farleft {
transform-origin: 40px 48px;
animation: cluster-scale-out-spawn-left 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cluster-scale-out-spawn-left {
0%,
25% {
opacity: 0;
transform: scale(0.3);
}
45%,
80% {
opacity: 1;
transform: scale(1);
}
92%,
100% {
opacity: 0;
transform: scale(0.3);
}
}
.pulsar-cluster-scale-out #cluster-scale-out-n-farright {
transform-origin: 120px 48px;
animation: cluster-scale-out-spawn-right 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cluster-scale-out-spawn-right {
0%,
25% {
opacity: 0;
transform: scale(0.3);
}
45%,
80% {
opacity: 1;
transform: scale(1);
}
92%,
100% {
opacity: 0;
transform: scale(0.3);
}
}
.pulsar-cluster-scale-out #cluster-scale-out-bkt-left {
animation: cluster-scale-out-bkt-l 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cluster-scale-out-bkt-l {
0%,
20% {
opacity: 0.2;
transform: translateX(8px);
}
45%,
80% {
opacity: 0.7;
transform: translateX(0);
}
95%,
100% {
opacity: 0.2;
transform: translateX(8px);
}
}
.pulsar-cluster-scale-out #cluster-scale-out-bkt-right {
animation: cluster-scale-out-bkt-r 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cluster-scale-out-bkt-r {
0%,
20% {
opacity: 0.2;
transform: translateX(-8px);
}
45%,
80% {
opacity: 0.7;
transform: translateX(0);
}
95%,
100% {
opacity: 0.2;
transform: translateX(-8px);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-cluster-scale-out * {
animation: none !important;
}
.pulsar-cluster-scale-out #cluster-scale-out-n-left {
transform: translateX(-4px);
}
.pulsar-cluster-scale-out #cluster-scale-out-n-right {
transform: translateX(4px);
}
.pulsar-cluster-scale-out #cluster-scale-out-bus {
transform: scaleX(2.5);
opacity: 0.8;
}
.pulsar-cluster-scale-out #cluster-scale-out-n-farleft,
.pulsar-cluster-scale-out #cluster-scale-out-n-farright {
opacity: 1;
transform: scale(1);
}
}