Broadcast

CSS

One node emits and three listeners acknowledge in the order the wave reaches them.

Tier: CSS
Dependencies: None
Duration: 4.5 s, loops
Categories: Loaders and spinners
Use cases: Notifications, Sync and integration
Industries: SaaS and software, Marketing and sales
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

CSS tier

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="signal-broadcast-title" class="pulsar pulsar-signal-broadcast" data-pulsar="signal-broadcast" role="img" viewBox="0 0 120 40"><title id="signal-broadcast-title">Broadcast</title><line id="signal-broadcast-track-ea" x1="60" x2="30" y1="10" y2="30" stroke="currentColor" stroke-width="2" class="signal-broadcast-track" opacity=".2"></line><line id="signal-broadcast-track-eb" x1="60" x2="60" y1="10" y2="30" stroke="currentColor" stroke-width="2" class="signal-broadcast-track" opacity=".2"></line><line id="signal-broadcast-track-ec" x1="60" x2="90" y1="10" y2="30" stroke="currentColor" stroke-width="2" class="signal-broadcast-track" opacity=".2"></line><line id="signal-broadcast-active-ea" x1="60" x2="30" y1="10" y2="30" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-broadcast-active signal-broadcast-active-ea"></line><line id="signal-broadcast-active-eb" x1="60" x2="60" y1="10" y2="30" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-broadcast-active signal-broadcast-active-eb"></line><line id="signal-broadcast-active-ec" x1="60" x2="90" y1="10" y2="30" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-broadcast-active signal-broadcast-active-ec"></line><circle id="signal-broadcast-node-e" cx="60" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-broadcast-node-a" cx="30" cy="30" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-broadcast-node-b" cx="60" cy="30" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-broadcast-node-c" cx="90" cy="30" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-broadcast-ripple-e" cx="60" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="1.5" class="signal-broadcast-ripple signal-broadcast-ripple-e"></circle><circle id="signal-broadcast-ripple-a" cx="30" cy="30" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="signal-broadcast-ripple signal-broadcast-ripple-a"></circle><circle id="signal-broadcast-ripple-b" cx="60" cy="30" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="signal-broadcast-ripple signal-broadcast-ripple-b"></circle><circle id="signal-broadcast-ripple-c" cx="90" cy="30" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="signal-broadcast-ripple signal-broadcast-ripple-c"></circle><circle id="signal-broadcast-highlight-a" cx="30" cy="30" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="signal-broadcast-highlight signal-broadcast-highlight-a"></circle><circle id="signal-broadcast-highlight-b" cx="60" cy="30" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="signal-broadcast-highlight signal-broadcast-highlight-b"></circle><circle id="signal-broadcast-highlight-c" cx="90" cy="30" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="signal-broadcast-highlight signal-broadcast-highlight-c"></circle></svg>

animation.css

.pulsar-signal-broadcast .signal-broadcast-active {
  animation-duration: 4500ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.pulsar-signal-broadcast .signal-broadcast-active-ea,
.pulsar-signal-broadcast .signal-broadcast-active-ec {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation-name: signal-broadcast-active-eac-anim;
}
.pulsar-signal-broadcast .signal-broadcast-active-eb {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation-name: signal-broadcast-active-eb-anim;
}
.pulsar-signal-broadcast .signal-broadcast-ripple {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation-duration: 4500ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.pulsar-signal-broadcast .signal-broadcast-ripple-e {
  animation-name: signal-broadcast-ripple-e-anim;
}
.pulsar-signal-broadcast .signal-broadcast-ripple-b {
  animation-name: signal-broadcast-ripple-b-anim;
}
.pulsar-signal-broadcast .signal-broadcast-ripple-a,
.pulsar-signal-broadcast .signal-broadcast-ripple-c {
  animation-name: signal-broadcast-ripple-ac-anim;
}

.pulsar-signal-broadcast .signal-broadcast-highlight {
  opacity: 0;
  animation-duration: 4500ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.pulsar-signal-broadcast .signal-broadcast-highlight-b {
  animation-name: signal-broadcast-highlight-b-anim;
}
.pulsar-signal-broadcast .signal-broadcast-highlight-a,
.pulsar-signal-broadcast .signal-broadcast-highlight-c {
  animation-name: signal-broadcast-highlight-ac-anim;
}

@keyframes signal-broadcast-ripple-e-anim {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  15% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes signal-broadcast-active-eb-anim {
  0%,
  10% {
    stroke-dashoffset: 20;
    opacity: 0;
  }
  10.1% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  28% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  50% {
    opacity: 0.6;
    animation-timing-function: linear;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}
@keyframes signal-broadcast-active-eac-anim {
  0%,
  15% {
    stroke-dashoffset: 36;
    opacity: 0;
  }
  15.1% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  38% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  50% {
    opacity: 0.6;
    animation-timing-function: linear;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}
@keyframes signal-broadcast-ripple-b-anim {
  0%,
  25% {
    transform: scale(1);
    opacity: 0;
  }
  25.1% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  40% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes signal-broadcast-ripple-ac-anim {
  0%,
  35% {
    transform: scale(1);
    opacity: 0;
  }
  35.1% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  50% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes signal-broadcast-highlight-b-anim {
  0%,
  25% {
    opacity: 0;
  }
  25% {
    opacity: 0.4;
  }
  32.5% {
    opacity: 1;
  }
  40% {
    opacity: 0.4;
  }
  45%,
  100% {
    opacity: 0;
  }
}
@keyframes signal-broadcast-highlight-ac-anim {
  0%,
  35% {
    opacity: 0;
  }
  35% {
    opacity: 0.4;
  }
  42.5% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  55%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-signal-broadcast .signal-broadcast-active {
    animation: none;
    opacity: 0;
  }
  .pulsar-signal-broadcast .signal-broadcast-track {
    opacity: 0.4;
  }
  .pulsar-signal-broadcast .signal-broadcast-ripple,
  .pulsar-signal-broadcast .signal-broadcast-highlight {
    animation: none;
    opacity: 0;
  }
}