Pulsar
Conveyor staging across sequential stations

Stage

CSS

Sequential units advance across four calibrated assembly stations, holding for operation before moving to the next position.

Tier
CSS
Dependencies
None
Duration
4.8 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Determinate progress
Industries
Logistics and supply chain, Manufacturing and industrial
Style
Geometric solid · light stroke
Set
conveyor
Tags
loopminimalgeometricuiprogress

Companion assets

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

Animated
Conveyor staging across sequential stations
CSS tier
Static vector
Stage, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-stage-title" class="pulsar pulsar-conveyor-stage" data-pulsar="conveyor-stage" role="img" viewBox="0 0 120 40"><title id="conveyor-stage-title">Conveyor staging across sequential stations</title><line id="conveyor-stage-track" x1="0" x2="120" y1="26" y2="26" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><g id="conveyor-stage-stations" stroke="currentColor" stroke-opacity=".3" stroke-width="2"><line x1="20" x2="20" y1="8" y2="14"></line><line x1="46" x2="46" y1="8" y2="14"></line><line x1="72" x2="72" y1="8" y2="14"></line><line x1="98" x2="98" y1="8" y2="14"></line></g><g id="conveyor-stage-heads" fill="currentColor" opacity=".5"><circle id="conveyor-stage-head-1" cx="20" cy="6" r="1.5"></circle><circle id="conveyor-stage-head-2" cx="46" cy="6" r="1.5"></circle><circle id="conveyor-stage-head-3" cx="72" cy="6" r="1.5"></circle><circle id="conveyor-stage-head-4" cx="98" cy="6" r="1.5"></circle></g><g id="conveyor-stage-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-stage-unit-1" width="12" height="12" x="-16" y="14" rx="1.5"></rect><rect id="conveyor-stage-unit-2" width="12" height="12" x="-16" y="14" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-stage #conveyor-stage-unit-1 {
  animation: conveyor-stage-cycle 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-conveyor-stage #conveyor-stage-unit-2 {
  animation: conveyor-stage-cycle 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: -2400ms;
}

.pulsar-conveyor-stage #conveyor-stage-head-1 {
  animation: conveyor-stage-tool 4800ms ease-in-out infinite;
}

.pulsar-conveyor-stage #conveyor-stage-head-2 {
  animation: conveyor-stage-tool 4800ms ease-in-out infinite;
  animation-delay: -600ms;
}

.pulsar-conveyor-stage #conveyor-stage-head-3 {
  animation: conveyor-stage-tool 4800ms ease-in-out infinite;
  animation-delay: -1200ms;
}

.pulsar-conveyor-stage #conveyor-stage-head-4 {
  animation: conveyor-stage-tool 4800ms ease-in-out infinite;
  animation-delay: -1800ms;
}

@keyframes conveyor-stage-cycle {
  0%,
  12% {
    transform: translateX(30px);
    opacity: 1;
  }
  16%,
  28% {
    transform: translateX(56px);
    opacity: 1;
  }
  32%,
  44% {
    transform: translateX(82px);
    opacity: 1;
  }
  48%,
  60% {
    transform: translateX(108px);
    opacity: 1;
  }
  66% {
    transform: translateX(146px);
    opacity: 1;
  }
  66.01% {
    transform: translateX(0);
    opacity: 0;
  }
  92% {
    transform: translateX(0);
    opacity: 0;
  }
  94% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(30px);
    opacity: 1;
  }
}

@keyframes conveyor-stage-tool {
  0%,
  10% {
    opacity: 1;
    transform: scale(1.4);
  }
  14%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-stage * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-stage #conveyor-stage-unit-1 {
    transform: translateX(56px);
    opacity: 1;
  }
  .pulsar-conveyor-stage #conveyor-stage-unit-2 {
    transform: translateX(108px);
    opacity: 1;
  }
}

From this family14 in Conveyor

See the family