Pulsar
Units nesting into a sealing container

Pack

CSS

Loose units travel along an infeed track and nest into an open container which seals once the final unit seats.

Tier
CSS
Dependencies
None
Duration
4 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
Units nesting into a sealing container
CSS tier
Static vector
Pack, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-pack-title" class="pulsar pulsar-conveyor-pack" data-pulsar="conveyor-pack" role="img" viewBox="0 0 120 40"><title id="conveyor-pack-title">Units nesting into a sealing container</title><line id="conveyor-pack-track" x1="0" x2="120" y1="28" y2="28" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><g id="conveyor-pack-box"><path id="conveyor-pack-crate" fill="none" stroke="currentColor" stroke-opacity=".3" stroke-width="2" d="M72 16v12h32V16"></path><line id="conveyor-pack-lid" x1="72" x2="104" y1="16" y2="16" stroke="currentColor" stroke-width="2"></line></g><g id="conveyor-pack-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-pack-unit-1" width="8" height="10" x="-12" y="17" rx="1.5"></rect><rect id="conveyor-pack-unit-2" width="8" height="10" x="-12" y="17" rx="1.5"></rect><rect id="conveyor-pack-unit-3" width="8" height="10" x="-12" y="17" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-pack #conveyor-pack-lid {
  animation: conveyor-pack-lid-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: 72px 16px;
}

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

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

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

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

@keyframes conveyor-pack-lid-anim {
  0%,
  56% {
    transform: rotate(-90deg);
  }
  64%,
  80% {
    transform: rotate(0);
  }
  88%,
  100% {
    transform: rotate(-90deg);
  }
}

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

@keyframes conveyor-pack-u1 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  20%,
  75% {
    transform: translateX(86px);
    opacity: 1;
  }
  88% {
    transform: translateX(131px);
    opacity: 0;
  }
  92% {
    transform: translateX(0);
    opacity: 0;
  }
  96%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes conveyor-pack-u2 {
  0%,
  16% {
    transform: translateX(0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  38%,
  75% {
    transform: translateX(96px);
    opacity: 1;
  }
  88% {
    transform: translateX(141px);
    opacity: 0;
  }
  92%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes conveyor-pack-u3 {
  0%,
  34% {
    transform: translateX(0);
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  56%,
  75% {
    transform: translateX(106px);
    opacity: 1;
  }
  88% {
    transform: translateX(151px);
    opacity: 0;
  }
  92%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-pack * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-pack #conveyor-pack-lid {
    transform: rotate(0);
  }
  .pulsar-conveyor-pack #conveyor-pack-unit-1 {
    transform: translateX(86px);
    opacity: 1;
  }
  .pulsar-conveyor-pack #conveyor-pack-unit-2 {
    transform: translateX(96px);
    opacity: 1;
  }
  .pulsar-conveyor-pack #conveyor-pack-unit-3 {
    transform: translateX(106px);
    opacity: 1;
  }
}

From this family14 in Conveyor

See the family