Pulsar
Conveyor hold gate accumulating and clearing a queue

Hold

CSS

An automated stop gate halts the line as units buffer in sequence, releasing the accumulated queue once the gate elevates.

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

Companion assets

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

Animated
Conveyor hold gate accumulating and clearing a queue
CSS tier
Static vector
Hold, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-hold-title" class="pulsar pulsar-conveyor-hold" data-pulsar="conveyor-hold" role="img" viewBox="0 0 120 40"><title id="conveyor-hold-title">Conveyor hold gate accumulating and clearing a queue</title><line id="conveyor-hold-track" x1="0" x2="120" y1="26" y2="26" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><line id="conveyor-hold-gate" x1="70" x2="70" y1="10" y2="30" stroke="currentColor" stroke-width="2"></line><circle id="conveyor-hold-light" cx="70" cy="5" r="2" fill="var(--pulsar-accent, currentColor)"></circle><g id="conveyor-hold-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-hold-unit-1" width="12" height="12" x="-14" y="14" rx="1.5"></rect><rect id="conveyor-hold-unit-2" width="12" height="12" x="-14" y="14" rx="1.5"></rect><rect id="conveyor-hold-unit-3" width="12" height="12" x="-14" y="14" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-hold #conveyor-hold-gate {
  animation: conveyor-hold-gate-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-conveyor-hold #conveyor-hold-light {
  animation: conveyor-hold-light-anim 4000ms ease-in-out infinite;
}

.pulsar-conveyor-hold #conveyor-hold-unit-1 {
  animation: conveyor-hold-u1 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-conveyor-hold #conveyor-hold-unit-2 {
  animation: conveyor-hold-u2 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-conveyor-hold #conveyor-hold-unit-3 {
  animation: conveyor-hold-u3 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes conveyor-hold-gate-anim {
  0%,
  55% {
    transform: translateY(0);
  }
  62%,
  86% {
    transform: translateY(-16px);
  }
  94%,
  100% {
    transform: translateY(0);
  }
}

@keyframes conveyor-hold-light-anim {
  0%,
  55% {
    opacity: 1;
    transform: scale(1.1);
  }
  62%,
  86% {
    opacity: 0.3;
    transform: scale(1);
  }
  94%,
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes conveyor-hold-u1 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  20%,
  62% {
    transform: translateX(70px);
    opacity: 1;
  }
  80% {
    transform: translateX(134px);
    opacity: 1;
  }
  86% {
    transform: translateX(148px);
    opacity: 0;
  }
  92% {
    transform: translateX(0);
    opacity: 0;
  }
  96%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes conveyor-hold-u2 {
  0%,
  10% {
    transform: translateX(0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  34%,
  68% {
    transform: translateX(56px);
    opacity: 1;
  }
  86% {
    transform: translateX(134px);
    opacity: 1;
  }
  92% {
    transform: translateX(148px);
    opacity: 0;
  }
  96%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes conveyor-hold-u3 {
  0%,
  24% {
    transform: translateX(0);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  48%,
  74% {
    transform: translateX(42px);
    opacity: 1;
  }
  92% {
    transform: translateX(134px);
    opacity: 1;
  }
  96% {
    transform: translateX(148px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-hold * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-hold #conveyor-hold-gate {
    transform: translateY(-16px);
  }
  .pulsar-conveyor-hold #conveyor-hold-unit-1 {
    transform: translateX(100px);
    opacity: 1;
  }
  .pulsar-conveyor-hold #conveyor-hold-unit-2 {
    transform: translateX(65px);
    opacity: 1;
  }
  .pulsar-conveyor-hold #conveyor-hold-unit-3 {
    transform: translateX(30px);
    opacity: 1;
  }
}

From this family14 in Conveyor

See the family