Pulsar
Containers stacking onto a loading pallet

Load

CSS

Containers travel from an infeed roller and stack onto a pallet in tiered courses, settling progressively before dispatch.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Determinate progress, Documents and files
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
Containers stacking onto a loading pallet
CSS tier
Static vector
Load, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-load-title" class="pulsar pulsar-conveyor-load" data-pulsar="conveyor-load" role="img" viewBox="0 0 120 40"><title id="conveyor-load-title">Containers stacking onto a loading pallet</title><line id="conveyor-load-floor" x1="20" x2="100" y1="36" y2="36" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><line id="conveyor-load-infeed" x1="0" x2="36" y1="12" y2="12" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><g id="conveyor-load-pallet-group"><rect id="conveyor-load-pallet" width="44" height="4" x="38" y="32" fill="none" stroke="currentColor" stroke-opacity=".3" stroke-width="1.5" rx="1"></rect><line x1="52" x2="52" y1="32" y2="36" stroke="currentColor" stroke-opacity=".3" stroke-width="1.5"></line><line x1="68" x2="68" y1="32" y2="36" stroke="currentColor" stroke-opacity=".3" stroke-width="1.5"></line></g><g id="conveyor-load-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-load-unit-1" width="16" height="9" x="-18" y="2" rx="1"></rect><rect id="conveyor-load-unit-2" width="16" height="9" x="-18" y="2" rx="1"></rect><rect id="conveyor-load-unit-3" width="16" height="9" x="-18" y="2" rx="1"></rect></g></svg>

animation.css

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

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

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

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

@keyframes conveyor-load-pallet-anim {
  0%,
  75% {
    transform: translateX(0);
    opacity: 1;
  }
  88% {
    transform: translateX(60px);
    opacity: 0;
  }
  92% {
    transform: translateX(0);
    opacity: 0;
  }
  96%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes conveyor-load-u1 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  15% {
    transform: translate(60px, 0);
  }
  22%,
  75% {
    transform: translate(60px, 20px);
    opacity: 1;
  }
  88% {
    transform: translate(120px, 20px);
    opacity: 0;
  }
  92% {
    transform: translate(0, 0);
    opacity: 0;
  }
  96%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes conveyor-load-u2 {
  0%,
  20% {
    transform: translate(0, 0);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  37% {
    transform: translate(82px, 0);
  }
  44%,
  75% {
    transform: translate(82px, 20px);
    opacity: 1;
  }
  88% {
    transform: translate(142px, 20px);
    opacity: 0;
  }
  92%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes conveyor-load-u3 {
  0%,
  42% {
    transform: translate(0, 0);
    opacity: 0;
  }
  44% {
    opacity: 1;
  }
  57% {
    transform: translate(71px, 0);
  }
  64%,
  75% {
    transform: translate(71px, 10px);
    opacity: 1;
  }
  88% {
    transform: translate(131px, 10px);
    opacity: 0;
  }
  92%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-load * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-load #conveyor-load-unit-1 {
    transform: translate(60px, 20px);
    opacity: 1;
  }
  .pulsar-conveyor-load #conveyor-load-unit-2 {
    transform: translate(82px, 20px);
    opacity: 1;
  }
  .pulsar-conveyor-load #conveyor-load-unit-3 {
    transform: translate(71px, 10px);
    opacity: 1;
  }
}

From this family14 in Conveyor

See the family