Pulsar
Pending

Pending

CSS

A ring holds an ellipsis whose dots cycle weight while a review sits unresolved.

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
Pending
CSS tier
Static vector
Pending, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-pending-title" class="pulsar pulsar-verdict-pending" data-pulsar="verdict-pending" role="img" viewBox="0 0 40 40"><title id="verdict-pending-title">Pending</title><path id="verdict-pending-ring" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M20 4a16 16 0 1 1 0 32 16 16 0 1 1 0-32"></path><path id="verdict-pending-dot-1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M13 20h.01"></path><path id="verdict-pending-dot-2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M20 20h.01"></path><path id="verdict-pending-dot-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M27 20h.01"></path></svg>

animation.css

/* Accent: the ellipsis, which is the part still working. */
.pulsar-verdict-pending #verdict-pending-dot-1,
.pulsar-verdict-pending #verdict-pending-dot-2,
.pulsar-verdict-pending #verdict-pending-dot-3 {
  stroke: var(--pulsar-accent, currentColor);
}

/*
  The first pass cycled stroke-width across a range too narrow to see, and
  its resting state dropped the dots entirely. The weight now runs 2.5 to 7
  -- nearly a tripling -- and the ellipsis rests at its base weight with all
  three dots present, which is what the concept promises.
*/
.pulsar-verdict-pending #verdict-pending-dot-1,
.pulsar-verdict-pending #verdict-pending-dot-2,
.pulsar-verdict-pending #verdict-pending-dot-3 {
  animation: verdict-pending-dot 4000ms ease-in-out infinite;
}

.pulsar-verdict-pending #verdict-pending-dot-2 {
  animation-delay: -800ms;
}

.pulsar-verdict-pending #verdict-pending-dot-1 {
  animation-delay: -1600ms;
}

@keyframes verdict-pending-dot {
  0%,
  100% {
    stroke-width: 2.5;
    opacity: 0.45;
  }
  20% {
    stroke-width: 7;
    opacity: 1;
  }
  55% {
    stroke-width: 2.5;
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-pending #verdict-pending-dot-1,
  .pulsar-verdict-pending #verdict-pending-dot-2,
  .pulsar-verdict-pending #verdict-pending-dot-3 {
    animation: none;
    stroke-width: 4;
    opacity: 1;
  }
}

From this family15 in Verdict

See the family