Packet

CSS

A payload splits into four fragments, travels apart, and reassembles in order at the far end.

Tier: CSS
Dependencies: None
Duration: 4 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: loopminimaluistaggerfade

Companion assets

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

Animated

CSS tier

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="signal-packet-title" class="pulsar pulsar-signal-packet" data-pulsar="signal-packet" role="img" viewBox="0 0 120 40"><title id="signal-packet-title">Packet</title><line id="signal-packet-node-a" x1="20" x2="20" y1="12" y2="28" stroke="currentColor" stroke-linecap="round" stroke-width="2"></line><line id="signal-packet-node-b" x1="100" x2="100" y1="12" y2="28" stroke="currentColor" stroke-linecap="round" stroke-width="2"></line><line id="signal-packet-track-1" x1="20" x2="100" y1="14" y2="14" stroke="currentColor" stroke-width="1.5" opacity=".15"></line><line id="signal-packet-track-2" x1="20" x2="100" y1="18" y2="18" stroke="currentColor" stroke-width="1.5" opacity=".15"></line><line id="signal-packet-track-3" x1="20" x2="100" y1="22" y2="22" stroke="currentColor" stroke-width="1.5" opacity=".15"></line><line id="signal-packet-track-4" x1="20" x2="100" y1="26" y2="26" stroke="currentColor" stroke-width="1.5" opacity=".15"></line><path id="signal-packet-fragment-1" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" d="M20 14h80" class="signal-packet-fragment signal-packet-fragment-1"></path><path id="signal-packet-fragment-2" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" d="M20 18h80" class="signal-packet-fragment signal-packet-fragment-2"></path><path id="signal-packet-fragment-3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" d="M20 22h80" class="signal-packet-fragment signal-packet-fragment-3"></path><path id="signal-packet-fragment-4" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" d="M20 26h80" class="signal-packet-fragment signal-packet-fragment-4"></path><line id="signal-packet-node-b-highlight" x1="100" x2="100" y1="12" y2="28" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-packet-node-b-highlight"></line></svg>

animation.css

.pulsar-signal-packet .signal-packet-fragment {
  stroke-dasharray: 8 72;
  stroke-dashoffset: 8;
  opacity: 0;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.pulsar-signal-packet .signal-packet-fragment-1 {
  animation-name: signal-packet-fragment-1-anim;
}
.pulsar-signal-packet .signal-packet-fragment-2 {
  animation-name: signal-packet-fragment-2-anim;
}
.pulsar-signal-packet .signal-packet-fragment-3 {
  animation-name: signal-packet-fragment-3-anim;
}
.pulsar-signal-packet .signal-packet-fragment-4 {
  animation-name: signal-packet-fragment-4-anim;
}
.pulsar-signal-packet .signal-packet-node-b-highlight {
  opacity: 0;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-name: signal-packet-node-b-highlight-anim;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes signal-packet-fragment-1-anim {
  0% {
    stroke-dashoffset: 8;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  12% {
    stroke-dashoffset: 8;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  42% {
    stroke-dashoffset: -72;
    opacity: 1;
    animation-timing-function: linear;
  }
  85% {
    stroke-dashoffset: -72;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -72;
    opacity: 0;
  }
}
@keyframes signal-packet-fragment-2-anim {
  0% {
    stroke-dashoffset: 8;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  12%,
  18% {
    stroke-dashoffset: 8;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  48% {
    stroke-dashoffset: -72;
    opacity: 1;
    animation-timing-function: linear;
  }
  85% {
    stroke-dashoffset: -72;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -72;
    opacity: 0;
  }
}
@keyframes signal-packet-fragment-3-anim {
  0% {
    stroke-dashoffset: 8;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  12%,
  24% {
    stroke-dashoffset: 8;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  54% {
    stroke-dashoffset: -72;
    opacity: 1;
    animation-timing-function: linear;
  }
  85% {
    stroke-dashoffset: -72;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -72;
    opacity: 0;
  }
}
@keyframes signal-packet-fragment-4-anim {
  0% {
    stroke-dashoffset: 8;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  12%,
  30% {
    stroke-dashoffset: 8;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  60% {
    stroke-dashoffset: -72;
    opacity: 1;
    animation-timing-function: linear;
  }
  85% {
    stroke-dashoffset: -72;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -72;
    opacity: 0;
  }
}
@keyframes signal-packet-node-b-highlight-anim {
  0%,
  62% {
    opacity: 0;
  }
  72% {
    opacity: 1;
  }
  82% {
    opacity: 0.2;
  }
  88%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-signal-packet .signal-packet-fragment {
    animation: none;
    stroke-dashoffset: -32;
    opacity: 1;
  }
  .pulsar-signal-packet .signal-packet-node-b-highlight {
    animation: none;
    opacity: 0;
  }
}