Pulsar
Queue

Queue

CSS

Messages stack at the back of a queue and drain from the front at a constant rate.

Tier
CSS
Dependencies
None
Duration
1.2 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.

Animated
Queue
CSS tier
Static vector
Queue, not animated
Download SVG

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

.pulsar-signal-queue .signal-queue-items {
  animation: signal-queue-shift 1200ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.pulsar-signal-queue .signal-queue-item {
  animation-duration: 1200ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.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;
  }
}