Batch

CSS

Loose items gather into a batch, the batch seals, and a fresh group begins forming.

Tier: CSS
Dependencies: None
Duration: 4 s, loops
Categories: Loaders and spinners
Use cases: Loading and waiting, Determinate progress
Industries: Logistics and supply chain, Energy and utilities
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

CSS tier

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-batch-title" class="pulsar pulsar-conveyor-batch" data-pulsar="conveyor-batch" role="img" viewBox="0 0 120 40"><title id="conveyor-batch-title">Batch</title><line id="conveyor-batch-track" x1="0" x2="120" y1="26" y2="26" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><rect id="conveyor-batch-container" width="36" height="16" x="72" y="10" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></rect><line id="conveyor-batch-gate" x1="108" x2="108" y1="10" y2="30" stroke="currentColor" stroke-width="2"></line><g id="conveyor-batch-parcels" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-batch-parcel-1" width="12" height="12" x="-16" y="12" rx="1.5"></rect><rect id="conveyor-batch-parcel-2" width="12" height="12" x="-16" y="12" rx="1.5"></rect><rect id="conveyor-batch-parcel-3" width="12" height="12" x="-16" y="12" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-batch #conveyor-batch-parcel-1 {
  animation: conveyor-batch-p1-anim 4000ms infinite;
}

.pulsar-conveyor-batch #conveyor-batch-parcel-2 {
  animation: conveyor-batch-p2-anim 4000ms infinite;
}

.pulsar-conveyor-batch #conveyor-batch-parcel-3 {
  animation: conveyor-batch-p3-anim 4000ms infinite;
}

.pulsar-conveyor-batch #conveyor-batch-gate {
  animation: conveyor-batch-gate-anim 4000ms infinite;
}

@keyframes conveyor-batch-p1-anim {
  0% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  15% {
    transform: translateX(112px);
  }
  65% {
    transform: translateX(112px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  85% {
    transform: translateX(152px);
  }
  99.9% {
    transform: translateX(152px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes conveyor-batch-p2-anim {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  30% {
    transform: translateX(100px);
  }
  65% {
    transform: translateX(100px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  85% {
    transform: translateX(152px);
  }
  99.9% {
    transform: translateX(152px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes conveyor-batch-p3-anim {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  45% {
    transform: translateX(88px);
  }
  65% {
    transform: translateX(88px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  85% {
    transform: translateX(152px);
  }
  99.9% {
    transform: translateX(152px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes conveyor-batch-gate-anim {
  0%,
  55% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  65%,
  85% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  95%,
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-batch #conveyor-batch-parcel-1 {
    animation: none;
    transform: translateX(112px);
  }
  .pulsar-conveyor-batch #conveyor-batch-parcel-2 {
    animation: none;
    transform: translateX(100px);
  }
  .pulsar-conveyor-batch #conveyor-batch-parcel-3 {
    animation: none;
    transform: translateX(88px);
  }
  .pulsar-conveyor-batch #conveyor-batch-gate {
    animation: none;
    transform: translateY(0);
  }
}