Reject
CSSAn automated overhead diverter rejects a flagged unit into a collection chute as standard units advance uninterrupted along the line.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Errors and warnings
- Industries
- Logistics and supply chain, Manufacturing and industrial
- 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-reject-title" class="pulsar pulsar-conveyor-reject" data-pulsar="conveyor-reject" role="img" viewBox="0 0 120 40"><title id="conveyor-reject-title">Conveyor rejecting a defective unit into a lower chute</title><line id="conveyor-reject-track" x1="0" x2="120" y1="20" y2="20" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><path id="conveyor-reject-chute" fill="none" stroke="currentColor" stroke-opacity=".2" stroke-width="1.5" d="M54 22v14h12V22"></path><g id="conveyor-reject-pusher"><line id="conveyor-reject-stem" x1="60" x2="60" y1="2" y2="9" stroke="currentColor" stroke-width="1.5"></line><line id="conveyor-reject-head" x1="55" x2="65" y1="9" y2="9" stroke="currentColor" stroke-width="2"></line></g><g id="conveyor-reject-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-reject-unit-1" width="10" height="10" x="-14" y="15" rx="1.5"></rect><rect id="conveyor-reject-unit-2" width="10" height="10" x="-14" y="15" rx="1.5"></rect><rect id="conveyor-reject-unit-3" width="10" height="10" x="-14" y="15" rx="1.5"></rect></g></svg>
animation.css
.pulsar-conveyor-reject #conveyor-reject-pusher {
animation: conveyor-reject-push-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-conveyor-reject #conveyor-reject-unit-1 {
animation: conveyor-reject-u1 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-conveyor-reject #conveyor-reject-unit-2 {
animation: conveyor-reject-u2 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-conveyor-reject #conveyor-reject-unit-3 {
animation: conveyor-reject-u3 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes conveyor-reject-push-anim {
0%,
42% {
transform: translateY(0);
}
48%,
52% {
transform: translateY(7px);
}
58%,
100% {
transform: translateY(0);
}
}
@keyframes conveyor-reject-u1 {
0% {
transform: translateX(0);
opacity: 1;
}
42% {
transform: translateX(130px);
opacity: 1;
}
48% {
transform: translateX(148px);
opacity: 0;
}
48.01%,
100% {
transform: translateX(0);
opacity: 0;
}
}
@keyframes conveyor-reject-u2 {
0%,
8% {
transform: translateX(0);
opacity: 0;
}
12% {
opacity: 1;
}
42% {
transform: translate(74px, 0);
}
48% {
transform: translate(74px, 12px);
opacity: 1;
}
70% {
transform: translate(74px, 12px);
opacity: 1;
}
78% {
transform: translate(74px, 16px);
opacity: 0;
}
80%,
100% {
transform: translateX(0);
opacity: 0;
}
}
@keyframes conveyor-reject-u3 {
0%,
25% {
transform: translateX(0);
opacity: 0;
}
28% {
opacity: 1;
}
75% {
transform: translateX(130px);
opacity: 1;
}
82% {
transform: translateX(148px);
opacity: 0;
}
85%,
100% {
transform: translateX(0);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-conveyor-reject * {
animation: none !important;
transform: none;
}
.pulsar-conveyor-reject #conveyor-reject-unit-1 {
transform: translateX(100px);
opacity: 1;
}
.pulsar-conveyor-reject #conveyor-reject-unit-2 {
transform: translate(74px, 12px);
opacity: 1;
}
.pulsar-conveyor-reject #conveyor-reject-unit-3 {
transform: translateX(30px);
opacity: 1;
}
}