Belt
CSSParcels travel a belt at an even pace, entering one side and leaving the other without a seam.
- Tier
- CSS
- Dependencies
- None
- Duration
- 1.6 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting
- 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-belt-title" class="pulsar pulsar-conveyor-belt" data-pulsar="conveyor-belt" role="img" viewBox="0 0 120 40"><title id="conveyor-belt-title">Conveyor belt</title><line id="conveyor-belt-track" x1="0" x2="120" y1="26" y2="26" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><g id="conveyor-belt-parcels" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-belt-parcel-1" width="12" height="12" x="-12" y="12" class="conveyor-belt-parcel" rx="1.5"></rect><rect id="conveyor-belt-parcel-2" width="12" height="12" x="12" y="12" class="conveyor-belt-parcel" rx="1.5"></rect><rect id="conveyor-belt-parcel-3" width="12" height="12" x="36" y="12" class="conveyor-belt-parcel" rx="1.5"></rect><rect id="conveyor-belt-parcel-4" width="12" height="12" x="60" y="12" class="conveyor-belt-parcel" rx="1.5"></rect><rect id="conveyor-belt-parcel-5" width="12" height="12" x="84" y="12" class="conveyor-belt-parcel" rx="1.5"></rect><rect id="conveyor-belt-parcel-6" width="12" height="12" x="108" y="12" class="conveyor-belt-parcel" rx="1.5"></rect></g></svg>
animation.css
.pulsar-conveyor-belt .conveyor-belt-parcel {
animation: conveyor-belt-move 1600ms linear infinite;
}
@keyframes conveyor-belt-move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(24px);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-conveyor-belt .conveyor-belt-parcel {
animation: none;
transform: none;
}
}