Dispatch
CSSA holding bay meters and dispatches units through an articulated gate along alternating upper and lower delivery tracks.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Sync and integration
- Industries
- Logistics and supply chain, Energy and utilities
- 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.
Code
animation.svg
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-dispatch-title" class="pulsar pulsar-conveyor-dispatch" data-pulsar="conveyor-dispatch" role="img" viewBox="0 0 120 40"><title id="conveyor-dispatch-title">Conveyor dispatching units along diverging paths</title><line id="conveyor-dispatch-infeed" x1="0" x2="40" y1="20" y2="20" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><rect id="conveyor-dispatch-bay" width="30" height="20" x="10" y="10" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" rx="2"></rect><path id="conveyor-dispatch-path-top" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" d="M40 20c16 0 24-8 40-8h40"></path><path id="conveyor-dispatch-path-bot" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" d="M40 20c16 0 24 8 40 8h40"></path><line id="conveyor-dispatch-switch" x1="42" x2="56" y1="20" y2="15" stroke="currentColor" stroke-width="1.5" opacity=".6"></line><line id="conveyor-dispatch-gate" x1="40" x2="40" y1="10" y2="30" stroke="currentColor" stroke-width="2"></line><g id="conveyor-dispatch-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-dispatch-unit-1" width="10" height="10" x="24" y="15" rx="1.5"></rect><rect id="conveyor-dispatch-unit-2" width="10" height="10" x="10" y="15" rx="1.5"></rect></g></svg>
animation.css
.pulsar-conveyor-dispatch #conveyor-dispatch-gate {
animation: conveyor-dispatch-gate-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-conveyor-dispatch #conveyor-dispatch-switch {
animation: conveyor-dispatch-switch-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
transform-origin: 42px 20px;
}
.pulsar-conveyor-dispatch #conveyor-dispatch-unit-1 {
animation: conveyor-dispatch-u1-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-conveyor-dispatch #conveyor-dispatch-unit-2 {
animation: conveyor-dispatch-u2-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes conveyor-dispatch-gate-anim {
0%,
10% {
transform: translateY(0);
}
16%,
38% {
transform: translateY(-16px);
}
44%,
58% {
transform: translateY(0);
}
64%,
86% {
transform: translateY(-16px);
}
92%,
100% {
transform: translateY(0);
}
}
@keyframes conveyor-dispatch-switch-anim {
0%,
46% {
transform: rotate(0);
}
54%,
96% {
transform: rotate(18deg);
}
100% {
transform: rotate(0);
}
}
@keyframes conveyor-dispatch-u1-anim {
0%,
16% {
transform: translate(0, 0);
opacity: 1;
}
42% {
transform: translate(72px, -8px);
opacity: 1;
}
48% {
transform: translate(96px, -8px);
opacity: 0;
}
90% {
transform: translate(-30px, 0);
opacity: 0;
}
96%,
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes conveyor-dispatch-u2-anim {
0%,
42% {
transform: translate(0, 0);
opacity: 1;
}
52% {
transform: translate(14px, 0);
opacity: 1;
}
64% {
transform: translate(14px, 0);
opacity: 1;
}
88% {
transform: translate(84px, 8px);
opacity: 1;
}
94% {
transform: translate(106px, 8px);
opacity: 0;
}
96% {
transform: translate(-20px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-conveyor-dispatch * {
animation: none !important;
transform: none;
}
.pulsar-conveyor-dispatch #conveyor-dispatch-unit-1 {
transform: translate(72px, -8px);
opacity: 1;
}
.pulsar-conveyor-dispatch #conveyor-dispatch-unit-2 {
transform: translate(14px, 0);
opacity: 1;
}
}