Relay
CSSA packet hops across four relay nodes, each lighting as it takes the handoff and dimming behind it.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4.2 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Sync and integration
- Industries
- SaaS and software, Logistics and supply chain
- Style
- Minimal line · light stroke
- Set
- signal
- Tags
- loopminimaluicirclestagger
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="signal-relay-title" class="pulsar pulsar-signal-relay" data-pulsar="signal-relay" role="img" viewBox="0 0 120 40"><title id="signal-relay-title">Relay</title><line id="signal-relay-track-1" x1="28" x2="44" y1="20" y2="20" fill="none" stroke="currentColor" stroke-width="2" class="signal-relay-track" opacity=".2"></line><line id="signal-relay-track-2" x1="52" x2="68" y1="20" y2="20" fill="none" stroke="currentColor" stroke-width="2" class="signal-relay-track" opacity=".2"></line><line id="signal-relay-track-3" x1="76" x2="92" y1="20" y2="20" fill="none" stroke="currentColor" stroke-width="2" class="signal-relay-track" opacity=".2"></line><line id="signal-relay-active-1" x1="28" x2="44" y1="20" y2="20" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-relay-active signal-relay-active-1"></line><line id="signal-relay-active-2" x1="52" x2="68" y1="20" y2="20" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-relay-active signal-relay-active-2"></line><line id="signal-relay-active-3" x1="76" x2="92" y1="20" y2="20" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-relay-active signal-relay-active-3"></line><circle id="signal-relay-node-1" cx="24" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-relay-node signal-relay-node-1"></circle><circle id="signal-relay-node-2" cx="48" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-relay-node signal-relay-node-2"></circle><circle id="signal-relay-node-3" cx="72" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-relay-node signal-relay-node-3"></circle><circle id="signal-relay-node-4" cx="96" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-relay-node signal-relay-node-4"></circle></svg>
animation.css
/* Three hops, left to right, then a beat of rest. Each segment is 16 long and
the dash is 4 with a 12 gap, so offset 4 sits before the start and -16 past
the end: the pulse enters and leaves the segment rather than being cut. */
.pulsar-signal-relay .signal-relay-active {
stroke-dasharray: 4 12;
stroke-dashoffset: 4;
opacity: 0;
animation-duration: 4200ms;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* travel */
}
.pulsar-signal-relay .signal-relay-active-1 {
animation-name: signal-relay-active-1-flow;
}
.pulsar-signal-relay .signal-relay-active-2 {
animation-name: signal-relay-active-2-flow;
}
.pulsar-signal-relay .signal-relay-active-3 {
animation-name: signal-relay-active-3-flow;
}
.pulsar-signal-relay .signal-relay-node {
opacity: 0.3;
animation-duration: 4200ms;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); /* fade */
}
.pulsar-signal-relay .signal-relay-node-1 {
animation-name: signal-relay-node-1-light;
}
.pulsar-signal-relay .signal-relay-node-2 {
animation-name: signal-relay-node-2-light;
}
.pulsar-signal-relay .signal-relay-node-3 {
animation-name: signal-relay-node-3-light;
}
.pulsar-signal-relay .signal-relay-node-4 {
animation-name: signal-relay-node-4-light;
}
@keyframes signal-relay-active-1-flow {
0% {
stroke-dashoffset: 4;
opacity: 1;
}
30% {
stroke-dashoffset: -16;
opacity: 1;
}
30.5%,
99.5% {
stroke-dashoffset: -16;
opacity: 0;
}
100% {
stroke-dashoffset: 4;
opacity: 0;
}
}
@keyframes signal-relay-active-2-flow {
0%,
29.5% {
stroke-dashoffset: 4;
opacity: 0;
}
30% {
stroke-dashoffset: 4;
opacity: 1;
}
60% {
stroke-dashoffset: -16;
opacity: 1;
}
60.5%,
99.5% {
stroke-dashoffset: -16;
opacity: 0;
}
100% {
stroke-dashoffset: 4;
opacity: 0;
}
}
@keyframes signal-relay-active-3-flow {
0%,
59.5% {
stroke-dashoffset: 4;
opacity: 0;
}
60% {
stroke-dashoffset: 4;
opacity: 1;
}
90% {
stroke-dashoffset: -16;
opacity: 1;
}
90.5%,
100% {
stroke-dashoffset: -16;
opacity: 0;
}
}
@keyframes signal-relay-node-1-light {
0%,
6% {
opacity: 1;
stroke: var(--pulsar-accent, currentColor);
}
22%,
94% {
opacity: 0.3;
stroke: currentColor;
}
100% {
opacity: 1;
stroke: var(--pulsar-accent, currentColor);
}
}
@keyframes signal-relay-node-2-light {
0%,
24% {
opacity: 0.3;
stroke: currentColor;
}
36% {
opacity: 1;
stroke: var(--pulsar-accent, currentColor);
}
52%,
100% {
opacity: 0.3;
stroke: currentColor;
}
}
@keyframes signal-relay-node-3-light {
0%,
54% {
opacity: 0.3;
stroke: currentColor;
}
66% {
opacity: 1;
stroke: var(--pulsar-accent, currentColor);
}
82%,
100% {
opacity: 0.3;
stroke: currentColor;
}
}
@keyframes signal-relay-node-4-light {
0%,
84% {
opacity: 0.3;
stroke: currentColor;
}
92% {
opacity: 1;
stroke: var(--pulsar-accent, currentColor);
}
100% {
opacity: 0.3;
stroke: currentColor;
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-signal-relay .signal-relay-active {
animation: none;
opacity: 0;
}
.pulsar-signal-relay .signal-relay-node {
animation: none;
opacity: 1;
stroke: currentColor;
}
.pulsar-signal-relay .signal-relay-track {
opacity: 0.5;
}
}