Sort

CSS

Items divert into three chutes by class, each landing in its own lane.

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

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-sort-title" class="pulsar pulsar-conveyor-sort" data-pulsar="conveyor-sort" role="img" viewBox="0 0 120 40"><title id="conveyor-sort-title">Sort</title><line id="conveyor-sort-track" x1="0" x2="120" y1="14" y2="14" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><line id="conveyor-sort-bin-1" x1="28" x2="44" y1="32" y2="32" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><line id="conveyor-sort-bin-2" x1="60" x2="76" y1="32" y2="32" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><line id="conveyor-sort-bin-3" x1="92" x2="108" y1="32" y2="32" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><g id="conveyor-sort-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-sort-unit-1" width="10" height="10" x="-12" y="9" rx="1.5"></rect><rect id="conveyor-sort-unit-2" width="10" height="10" x="-12" y="9" rx="5"></rect><rect id="conveyor-sort-unit-3" width="6" height="12" x="-12" y="8" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-sort #conveyor-sort-unit-1 {
  animation: conveyor-sort-u1-anim 4500ms infinite;
}

.pulsar-conveyor-sort #conveyor-sort-unit-2 {
  animation: conveyor-sort-u2-anim 4500ms infinite;
}

.pulsar-conveyor-sort #conveyor-sort-unit-3 {
  animation: conveyor-sort-u3-anim 4500ms infinite;
}

@keyframes conveyor-sort-u1-anim {
  0% {
    transform: translateX(0) translateY(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  15% {
    transform: translateX(43px) translateY(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  25% {
    transform: translateX(43px) translateY(13px);
  }
  80% {
    transform: translateX(43px) translateY(13px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  95% {
    transform: translateX(136px) translateY(13px);
  }
  99.9% {
    transform: translateX(136px) translateY(13px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes conveyor-sort-u2-anim {
  0% {
    transform: translateX(0) translateY(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  20% {
    transform: translateX(75px) translateY(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  30% {
    transform: translateX(75px) translateY(13px);
  }
  80% {
    transform: translateX(75px) translateY(13px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  95% {
    transform: translateX(136px) translateY(13px);
  }
  99.9% {
    transform: translateX(136px) translateY(13px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes conveyor-sort-u3-anim {
  0% {
    transform: translateX(0) translateY(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  25% {
    transform: translateX(109px) translateY(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  35% {
    transform: translateX(109px) translateY(12px);
  }
  80% {
    transform: translateX(109px) translateY(12px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  95% {
    transform: translateX(136px) translateY(12px);
  }
  99.9% {
    transform: translateX(136px) translateY(12px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-sort #conveyor-sort-unit-1 {
    animation: none;
    transform: translateX(43px) translateY(13px);
  }
  .pulsar-conveyor-sort #conveyor-sort-unit-2 {
    animation: none;
    transform: translateX(75px) translateY(13px);
  }
  .pulsar-conveyor-sort #conveyor-sort-unit-3 {
    animation: none;
    transform: translateX(109px) translateY(12px);
  }
}