Pulsar
Queued

Queued

CSS

A mark waits behind two others, advancing one place as the front clears.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Loading and waiting, Workflow and approvals
Industries
SaaS and software, Cross-industry
Style
Bold line · regular stroke
Set
verdict
Tags
loopminimalui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-queued-title" class="pulsar pulsar-verdict-queued" data-pulsar="verdict-queued" role="img" viewBox="0 0 40 40"><title id="verdict-queued-title">Queued</title><path id="verdict-queued-gate" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M4 12v16" opacity=".35"></path><path id="verdict-queued-front" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M12 20h5"></path><path id="verdict-queued-middle" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M22 20h5"></path><path id="verdict-queued-back" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M32 20h5"></path></svg>

animation.css

/* Accent: the mark at the back, whose turn the whole animation is about. */
.pulsar-verdict-queued #verdict-queued-back {
  stroke: var(--pulsar-accent, currentColor);
}

/* The front clears through the gate; everything behind advances one place. */
.pulsar-verdict-queued #verdict-queued-front {
  transform-box: view-box;
  animation: verdict-queued-clear 4000ms ease-in-out infinite;
}

@keyframes verdict-queued-clear {
  0%,
  18% {
    transform: translateX(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  42%,
  88% {
    transform: translateX(-12px);
    opacity: 0;
  }
  98%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.pulsar-verdict-queued #verdict-queued-middle,
.pulsar-verdict-queued #verdict-queued-back {
  transform-box: view-box;
  animation: verdict-queued-advance 4000ms ease-in-out infinite;
}

@keyframes verdict-queued-advance {
  0%,
  34% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  58%,
  88% {
    transform: translateX(-10px);
  }
  98%,
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-queued #verdict-queued-front {
    animation: none;
    transform: translateX(-12px);
    opacity: 0;
  }
  .pulsar-verdict-queued #verdict-queued-middle,
  .pulsar-verdict-queued #verdict-queued-back {
    animation: none;
    transform: translateX(-10px);
  }
}

From this family15 in Verdict

See the family