Pulsar
Packet stream detecting dropout and retransmitting missing piece

Dropout

CSS

A continuous data stream experiences a packet dropout, triggering an automated parity check and seamless packet retransmission to restore stream integrity.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Errors and warnings, Sync and integration
Industries
SaaS and software, Logistics and supply chain
Style
Minimal line · light stroke
Set
signal
Tags
loopminimaluipulsestagger

Companion assets

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

Animated
Packet stream detecting dropout and retransmitting missing piece
CSS tier
Static vector
Dropout, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="signal-dropout-title" class="pulsar pulsar-signal-dropout" data-pulsar="signal-dropout" role="img" viewBox="0 0 120 40"><title id="signal-dropout-title">Packet stream detecting dropout and retransmitting missing piece</title><line id="signal-dropout-track" x1="16" x2="104" y1="20" y2="20" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><path id="signal-dropout-bracket-top" fill="none" stroke="currentColor" stroke-width="1.25" d="M52 13v-3h16v3" opacity=".3"></path><path id="signal-dropout-bracket-bot" fill="none" stroke="currentColor" stroke-width="1.25" d="M52 27v3h16v-3" opacity=".3"></path><line id="signal-dropout-target-gap" x1="53" x2="67" y1="20" y2="20" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="2 2" stroke-width="1.5" opacity="0"></line><line id="signal-dropout-packet-1" x1="78" x2="94" y1="20" y2="20" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></line><line id="signal-dropout-packet-loss" x1="52" x2="68" y1="20" y2="20" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></line><line id="signal-dropout-packet-repair" x1="52" x2="68" y1="20" y2="20" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2.5" opacity="0"></line><line id="signal-dropout-packet-3" x1="26" x2="42" y1="20" y2="20" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></line></svg>

animation.css

.pulsar-signal-dropout #signal-dropout-packet-loss {
  animation: signal-dropout-loss-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-signal-dropout #signal-dropout-target-gap {
  animation: signal-dropout-gap-anim 4000ms ease-in-out infinite;
}

.pulsar-signal-dropout #signal-dropout-bracket-top,
.pulsar-signal-dropout #signal-dropout-bracket-bot {
  animation: signal-dropout-bracket-anim 4000ms ease-in-out infinite;
}

.pulsar-signal-dropout #signal-dropout-packet-repair {
  animation: signal-dropout-repair-anim 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes signal-dropout-loss-anim {
  0%,
  15% {
    opacity: 1;
  }
  18% {
    opacity: 0.3;
  }
  22% {
    opacity: 0.8;
  }
  26%,
  100% {
    opacity: 0;
  }
}

@keyframes signal-dropout-gap-anim {
  0%,
  26% {
    opacity: 0;
  }
  30%,
  54% {
    opacity: 0.9;
  }
  58%,
  100% {
    opacity: 0;
  }
}

@keyframes signal-dropout-bracket-anim {
  0%,
  26% {
    stroke: currentColor;
    opacity: 0.3;
  }
  30%,
  54% {
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  60%,
  100% {
    stroke: currentColor;
    opacity: 0.3;
  }
}

@keyframes signal-dropout-repair-anim {
  0%,
  48% {
    opacity: 0;
    transform: translateY(-8px);
  }
  56%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-signal-dropout * {
    animation: none !important;
    transform: none;
  }
  .pulsar-signal-dropout #signal-dropout-packet-loss {
    opacity: 1;
  }
  .pulsar-signal-dropout #signal-dropout-packet-repair {
    opacity: 0;
  }
}

From this family13 in Signal

See the family