Queue
CSSMessages stack at the back of a queue and drain from the front at a constant rate.
- Tier
- CSS
- Dependencies
- None
- Duration
- 3 s, loops
- Categories
- Loaders and spinners
- Use cases
- Loading and waiting, Determinate progress
- Industries
- SaaS and software, Logistics and supply chain
- Style
- Minimal line · light stroke
- Set
- signal
- Tags
- loopminimaluicircle
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="signal-queue-title" class="pulsar pulsar-signal-queue" data-pulsar="signal-queue" role="img" viewBox="0 0 120 40"><title id="signal-queue-title">Queue</title><line id="signal-queue-rail-top" x1="20" x2="100" y1="12" y2="12" fill="none" stroke="currentColor" stroke-width="2" opacity=".2"></line><line id="signal-queue-rail-bottom" x1="20" x2="100" y1="28" y2="28" fill="none" stroke="currentColor" stroke-width="2" opacity=".2"></line><g id="signal-queue-items" class="signal-queue-items"><circle id="signal-queue-item-1" cx="10" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-queue-item signal-queue-item-1"></circle><circle id="signal-queue-item-2" cx="30" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-queue-item signal-queue-item-2"></circle><circle id="signal-queue-item-3" cx="50" cy="20" r="4" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="signal-queue-item signal-queue-item-3"></circle><circle id="signal-queue-item-4" cx="70" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-queue-item signal-queue-item-4"></circle><circle id="signal-queue-item-5" cx="90" cy="20" r="4" fill="none" stroke="currentColor" stroke-width="2" class="signal-queue-item signal-queue-item-5"></circle></g></svg>
animation.css
/* A queue advances one slot per cycle. Every property here is tied to the
strip's position, so all of it is linear: an eased continuous loop
accelerates and stalls once per cycle, which is exactly the stutter a
conveyor must not have. Easing belongs on gestures that start and stop. */
.pulsar-signal-queue .signal-queue-items {
animation: signal-queue-shift 3000ms linear infinite;
}
.pulsar-signal-queue .signal-queue-item {
animation-duration: 3000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.pulsar-signal-queue .signal-queue-item-1 {
animation-name: signal-queue-item-1-fade;
}
.pulsar-signal-queue .signal-queue-item-2 {
animation-name: signal-queue-item-2-color;
}
.pulsar-signal-queue .signal-queue-item-3 {
animation-name: signal-queue-item-3-color;
}
.pulsar-signal-queue .signal-queue-item-5 {
animation-name: signal-queue-item-5-fade;
}
@keyframes signal-queue-shift {
0% {
transform: translateX(0);
}
100% {
transform: translateX(20px);
}
}
@keyframes signal-queue-item-1-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes signal-queue-item-2-color {
0% {
stroke: currentColor;
}
100% {
stroke: var(--pulsar-accent, currentColor);
}
}
@keyframes signal-queue-item-3-color {
0% {
stroke: var(--pulsar-accent, currentColor);
}
100% {
stroke: currentColor;
}
}
@keyframes signal-queue-item-5-fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-signal-queue .signal-queue-items {
animation: none;
transform: none;
}
.pulsar-signal-queue .signal-queue-item {
animation: none;
}
.pulsar-signal-queue .signal-queue-item-1 {
opacity: 0;
}
.pulsar-signal-queue .signal-queue-item-2 {
opacity: 1;
stroke: currentColor;
}
.pulsar-signal-queue .signal-queue-item-3 {
opacity: 1;
stroke: var(--pulsar-accent, currentColor);
}
.pulsar-signal-queue .signal-queue-item-4 {
opacity: 1;
stroke: currentColor;
}
.pulsar-signal-queue .signal-queue-item-5 {
opacity: 1;
stroke: currentColor;
}
}