Cluster Rebalance
CSSFive node dots arranged along a track axis shift dynamically between division boundary rules to establish equal slot distribution and workload balance.
- Tier
- CSS
- Dependencies
- None
- Duration
- 6.4 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Automation and rules
- Industries
- IT services and infrastructure, Cross-industry
- Style
- Minimal line · light stroke
- Set
- cluster
- Tags
- looplinedotsui
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-rebalance-title" class="pulsar pulsar-cluster-rebalance" data-pulsar="cluster-rebalance" role="img" viewBox="0 0 160 96"><title id="cluster-rebalance-title">Five cluster nodes shifting along an axis between dynamic boundary markers to rebalance slot distribution</title><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="16" x2="144" y1="48" y2="48"></line><line x1="16" x2="144" y1="36" y2="36" stroke-dasharray="1 3"></line><line x1="16" x2="144" y1="60" y2="60" stroke-dasharray="1 3"></line></g><g id="cluster-rebalance-dividers" fill="none" stroke="currentColor" stroke-width=".8" opacity=".35"><line id="cluster-rebalance-d1" x1="42.5" x2="42.5" y1="30" y2="66"></line><line id="cluster-rebalance-d2" x1="67.5" x2="67.5" y1="30" y2="66"></line><line id="cluster-rebalance-d3" x1="92.5" x2="92.5" y1="30" y2="66"></line><line id="cluster-rebalance-d4" x1="117.5" x2="117.5" y1="30" y2="66"></line></g><line id="cluster-rebalance-bar" x1="30" x2="130" y1="48" y2="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" opacity="0"></line><g id="cluster-rebalance-n1"><circle cx="26" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="26" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-rebalance-n2"><circle cx="44" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="44" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-rebalance-n3"><circle cx="58" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="58" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-rebalance-n4"><circle cx="108" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="108" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-rebalance-n5"><circle cx="134" cy="48" r="4" fill="none" stroke="currentColor"></circle><circle cx="134" cy="48" r="2" fill="currentColor"></circle></g></svg>
animation.css
.pulsar-cluster-rebalance {
--pulsar-accent: currentColor;
}
.pulsar-cluster-rebalance #cluster-rebalance-bar {
stroke: var(--pulsar-accent, currentColor);
}
.pulsar-cluster-rebalance #cluster-rebalance-d1,
.pulsar-cluster-rebalance #cluster-rebalance-d2,
.pulsar-cluster-rebalance #cluster-rebalance-d3,
.pulsar-cluster-rebalance #cluster-rebalance-d4 {
stroke: var(--pulsar-accent, currentColor);
}
.pulsar-cluster-rebalance #cluster-rebalance-n1 circle:last-child,
.pulsar-cluster-rebalance #cluster-rebalance-n2 circle:last-child,
.pulsar-cluster-rebalance #cluster-rebalance-n3 circle:last-child,
.pulsar-cluster-rebalance #cluster-rebalance-n4 circle:last-child,
.pulsar-cluster-rebalance #cluster-rebalance-n5 circle:last-child {
fill: var(--pulsar-accent, currentColor);
}
.pulsar-cluster-rebalance #cluster-rebalance-n1 {
animation: cluster-rebalance-n1 6400ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}
@keyframes cluster-rebalance-n1 {
0%,
15% {
transform: translateX(0);
}
45%,
80% {
transform: translateX(4px);
}
95%,
100% {
transform: translateX(0);
}
}
.pulsar-cluster-rebalance #cluster-rebalance-n2 {
animation: cluster-rebalance-n2 6400ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}
@keyframes cluster-rebalance-n2 {
0%,
15% {
transform: translateX(0);
}
45%,
80% {
transform: translateX(11px);
}
95%,
100% {
transform: translateX(0);
}
}
.pulsar-cluster-rebalance #cluster-rebalance-n3 {
animation: cluster-rebalance-n3 6400ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}
@keyframes cluster-rebalance-n3 {
0%,
15% {
transform: translateX(0);
}
45%,
80% {
transform: translateX(22px);
}
95%,
100% {
transform: translateX(0);
}
}
.pulsar-cluster-rebalance #cluster-rebalance-n4 {
animation: cluster-rebalance-n4 6400ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}
@keyframes cluster-rebalance-n4 {
0%,
15% {
transform: translateX(0);
}
45%,
80% {
transform: translateX(-3px);
}
95%,
100% {
transform: translateX(0);
}
}
.pulsar-cluster-rebalance #cluster-rebalance-n5 {
animation: cluster-rebalance-n5 6400ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}
@keyframes cluster-rebalance-n5 {
0%,
15% {
transform: translateX(0);
}
45%,
80% {
transform: translateX(-4px);
}
95%,
100% {
transform: translateX(0);
}
}
.pulsar-cluster-rebalance #cluster-rebalance-bar {
animation: cluster-rebalance-bar-pulse 6400ms ease-in-out infinite;
}
@keyframes cluster-rebalance-bar-pulse {
0%,
40% {
opacity: 0;
}
50%,
78% {
opacity: 0.6;
}
88%,
100% {
opacity: 0;
}
}
.pulsar-cluster-rebalance #cluster-rebalance-d1,
.pulsar-cluster-rebalance #cluster-rebalance-d2,
.pulsar-cluster-rebalance #cluster-rebalance-d3,
.pulsar-cluster-rebalance #cluster-rebalance-d4 {
animation: cluster-rebalance-div 6400ms ease-in-out infinite;
}
@keyframes cluster-rebalance-div {
0%,
20% {
opacity: 0.2;
transform: scaleY(0.6);
}
45%,
80% {
opacity: 0.8;
transform: scaleY(1);
}
95%,
100% {
opacity: 0.2;
transform: scaleY(0.6);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-cluster-rebalance * {
animation: none !important;
}
.pulsar-cluster-rebalance #cluster-rebalance-n1 {
transform: translateX(4px);
}
.pulsar-cluster-rebalance #cluster-rebalance-n2 {
transform: translateX(11px);
}
.pulsar-cluster-rebalance #cluster-rebalance-n3 {
transform: translateX(22px);
}
.pulsar-cluster-rebalance #cluster-rebalance-n4 {
transform: translateX(-3px);
}
.pulsar-cluster-rebalance #cluster-rebalance-n5 {
transform: translateX(-4px);
}
.pulsar-cluster-rebalance #cluster-rebalance-bar {
opacity: 0.6;
}
}