Pulsar
Closed carousel conveyor circulating carriers in a continuous loop

Cycle

CSS

An oval carousel track continuously circulates four payload carriers through an articulated closed-loop transfer circuit.

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

Companion assets

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

Animated
Closed carousel conveyor circulating carriers in a continuous loop
CSS tier
Static vector
Cycle, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-cycle-title" class="pulsar pulsar-conveyor-cycle" data-pulsar="conveyor-cycle" role="img" viewBox="0 0 120 40"><title id="conveyor-cycle-title">Closed carousel conveyor circulating carriers in a continuous loop</title><rect id="conveyor-cycle-track" width="68" height="20" x="26" y="10" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" rx="10"></rect><line id="conveyor-cycle-shaft" x1="36" x2="84" y1="20" y2="20" stroke="currentColor" stroke-dasharray="2 3" stroke-opacity=".12" stroke-width="1"></line><g id="conveyor-cycle-wheel-left" fill="none" stroke="currentColor" stroke-opacity=".25" stroke-width="1.25"><circle cx="36" cy="20" r="5"></circle><line x1="36" x2="36" y1="15" y2="25"></line><line x1="31" x2="41" y1="20" y2="20"></line></g><g id="conveyor-cycle-wheel-right" fill="none" stroke="currentColor" stroke-opacity=".25" stroke-width="1.25"><circle cx="84" cy="20" r="5"></circle><line x1="84" x2="84" y1="15" y2="25"></line><line x1="79" x2="89" y1="20" y2="20"></line></g><g id="conveyor-cycle-carriers" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-cycle-carrier-1" width="10" height="7" x="31" y="6.5" rx="1.5"></rect><rect id="conveyor-cycle-carrier-2" width="10" height="7" x="31" y="6.5" rx="1.5"></rect><rect id="conveyor-cycle-carrier-3" width="10" height="7" x="31" y="6.5" rx="1.5"></rect><rect id="conveyor-cycle-carrier-4" width="10" height="7" x="31" y="6.5" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-cycle #conveyor-cycle-wheel-left {
  animation: conveyor-cycle-spin 6000ms linear infinite;
  transform-origin: 36px 20px;
}

.pulsar-conveyor-cycle #conveyor-cycle-wheel-right {
  animation: conveyor-cycle-spin 6000ms linear infinite;
  transform-origin: 84px 20px;
}

.pulsar-conveyor-cycle #conveyor-cycle-carrier-1 {
  animation: conveyor-cycle-track-flow 6000ms linear infinite;
  animation-delay: 0ms;
}

.pulsar-conveyor-cycle #conveyor-cycle-carrier-2 {
  animation: conveyor-cycle-track-flow 6000ms linear infinite;
  animation-delay: -1500ms;
}

.pulsar-conveyor-cycle #conveyor-cycle-carrier-3 {
  animation: conveyor-cycle-track-flow 6000ms linear infinite;
  animation-delay: -3000ms;
}

.pulsar-conveyor-cycle #conveyor-cycle-carrier-4 {
  animation: conveyor-cycle-track-flow 6000ms linear infinite;
  animation-delay: -4500ms;
}

@keyframes conveyor-cycle-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes conveyor-cycle-track-flow {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(48px, 0);
  }
  35% {
    transform: translate(55px, 3px);
  }
  40% {
    transform: translate(58px, 10px);
  }
  45% {
    transform: translate(55px, 17px);
  }
  50% {
    transform: translate(48px, 20px);
  }
  80% {
    transform: translate(0, 20px);
  }
  85% {
    transform: translate(-7px, 17px);
  }
  90% {
    transform: translate(-10px, 10px);
  }
  95% {
    transform: translate(-7px, 3px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-cycle * {
    animation: none;
    transform: none;
  }
  .pulsar-conveyor-cycle #conveyor-cycle-carrier-1 {
    transform: translate(0, 0);
  }
  .pulsar-conveyor-cycle #conveyor-cycle-carrier-2 {
    transform: translate(48px, 0);
  }
  .pulsar-conveyor-cycle #conveyor-cycle-carrier-3 {
    transform: translate(48px, 20px);
  }
  .pulsar-conveyor-cycle #conveyor-cycle-carrier-4 {
    transform: translate(0, 20px);
  }
}

From this family14 in Conveyor

See the family