Pulsar

Multi-Stop Dispatch

CSS

A central distribution hub branches into three radial transit routes with staggered outward delivery signals.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Workflow and approvals
Industries
Logistics and supply chain
Style
Minimal line · light stroke
Set
lastmile
Tags
linestaggerminimalloop

Companion assets

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

Animated
CSS tier
Static vector
Multi-Stop Dispatch, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-lastmile-multi-stop" data-pulsar="lastmile-multi-stop" viewBox="0 0 160 96"><circle cx="40" cy="48" r="6" stroke="currentColor" stroke-width="1.4" class="hub"></circle><circle cx="40" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)" class="hub-core"></circle><line x1="46" x2="116" y1="45" y2="26" stroke="currentColor" class="branch b1" opacity=".3"></line><line x1="46" x2="124" y1="48" y2="48" stroke="currentColor" class="branch b2" opacity=".3"></line><line x1="46" x2="116" y1="51" y2="70" stroke="currentColor" class="branch b3" opacity=".3"></line><circle cx="46" cy="45" r="2.5" fill="var(--pulsar-accent, currentColor)" class="token tk1"></circle><circle cx="46" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)" class="token tk2"></circle><circle cx="46" cy="51" r="2.5" fill="var(--pulsar-accent, currentColor)" class="token tk3"></circle><circle cx="120" cy="25" r="3.5" stroke="currentColor" stroke-width="1.2" class="dest d1"></circle><circle cx="128" cy="48" r="3.5" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.2" class="dest d2"></circle><circle cx="120" cy="71" r="3.5" stroke="currentColor" stroke-width="1.2" class="dest d3"></circle></svg>

animation.css

.pulsar-lastmile-multi-stop {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-lastmile-multi-stop .token.tk1 {
  animation: lastmile-multi-stop-out1 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.pulsar-lastmile-multi-stop .token.tk2 {
  animation: lastmile-multi-stop-out2 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite -2.66s;
}
.pulsar-lastmile-multi-stop .token.tk3 {
  animation: lastmile-multi-stop-out3 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite -1.33s;
}
.pulsar-lastmile-multi-stop .dest.d1 {
  animation: lastmile-multi-stop-ping 4s ease-in-out infinite;
}
.pulsar-lastmile-multi-stop .dest.d2 {
  animation: lastmile-multi-stop-ping 4s ease-in-out infinite -2.66s;
}
.pulsar-lastmile-multi-stop .dest.d3 {
  animation: lastmile-multi-stop-ping 4s ease-in-out infinite -1.33s;
}
@keyframes lastmile-multi-stop-out1 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80%,
  100% {
    transform: translate(70px, -19px);
    opacity: 0;
  }
}
@keyframes lastmile-multi-stop-out2 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80%,
  100% {
    transform: translate(78px, 0);
    opacity: 0;
  }
}
@keyframes lastmile-multi-stop-out3 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80%,
  100% {
    transform: translate(70px, 19px);
    opacity: 0;
  }
}
@keyframes lastmile-multi-stop-ping {
  0%,
  60% {
    opacity: 0.3;
    transform: scale(0.9);
    transform-origin: center;
  }
  80% {
    opacity: 1;
    transform: scale(1.2);
    transform-origin: center;
  }
  100% {
    opacity: 0.3;
    transform: scale(0.9);
    transform-origin: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-lastmile-multi-stop .token.tk1,
  .pulsar-lastmile-multi-stop .token.tk2,
  .pulsar-lastmile-multi-stop .token.tk3,
  .pulsar-lastmile-multi-stop .dest.d1,
  .pulsar-lastmile-multi-stop .dest.d2,
  .pulsar-lastmile-multi-stop .dest.d3 {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Lastmile

See the family