Pulsar

Ledger Scan

CSS

A vertical scan line verifying rows in a dual-column layout.

Tier
CSS
Dependencies
None
Duration
4.8 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Search and filtering
Industries
Finance and fintech, Professional services
Style
Minimal line · light stroke
Set
reconcile
Tags
loopuiminimal

Companion assets

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

Animated
CSS tier
Static vector
Ledger Scan, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-reconcile-ledger" data-pulsar="reconcile-ledger" viewBox="0 0 120 40"><rect id="reconcile-ledger-r1-c1" width="30" height="4" x="20" y="4" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c1" rx="2"></rect><rect id="reconcile-ledger-r2-c1" width="30" height="4" x="20" y="12" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c1" rx="2"></rect><rect id="reconcile-ledger-r3-c1" width="30" height="4" x="20" y="20" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c1" rx="2"></rect><rect id="reconcile-ledger-r4-c1" width="30" height="4" x="20" y="28" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c1" rx="2"></rect><rect id="reconcile-ledger-r1-c2" width="30" height="4" x="70" y="4" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c2" rx="2"></rect><rect id="reconcile-ledger-r2-c2" width="30" height="4" x="70" y="12" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c2" rx="2"></rect><rect id="reconcile-ledger-r3-c2" width="30" height="4" x="70" y="20" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c2" rx="2"></rect><rect id="reconcile-ledger-r4-c2" width="30" height="4" x="70" y="28" fill="none" stroke="currentColor" stroke-width="2" class="pulsar-reconcile-ledger-row pulsar-reconcile-ledger-c2" rx="2"></rect><line id="reconcile-ledger-scanner" x1="10" x2="10" y1="4" y2="32" stroke="currentColor" stroke-linecap="round" stroke-width="2" class="pulsar-reconcile-ledger-scanner"></line></svg>

animation.css

/* Accent: the scanner crossing the ledger. */
.pulsar-reconcile-ledger .pulsar-reconcile-ledger-scanner {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-reconcile-ledger .pulsar-reconcile-ledger-row {
  opacity: 0.4;
}

.pulsar-reconcile-ledger .pulsar-reconcile-ledger-scanner {
  animation: reconcile-ledger-scan 4800ms linear infinite;
  transform-box: view-box;
}

.pulsar-reconcile-ledger .pulsar-reconcile-ledger-c1 {
  animation: reconcile-ledger-brighten-c1 4800ms linear infinite;
}

.pulsar-reconcile-ledger .pulsar-reconcile-ledger-c2 {
  animation: reconcile-ledger-brighten-c2 4800ms linear infinite;
}

@keyframes reconcile-ledger-scan {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  80% {
    transform: translateX(100px);
    opacity: 1;
  }
  85%,
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

@keyframes reconcile-ledger-brighten-c1 {
  0%,
  8% {
    opacity: 0.4;
  }
  20% {
    opacity: 1;
  }
  32%,
  100% {
    opacity: 0.4;
  }
}

@keyframes reconcile-ledger-brighten-c2 {
  0%,
  48% {
    opacity: 0.4;
  }
  60% {
    opacity: 1;
  }
  72%,
  100% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-ledger .pulsar-reconcile-ledger-row {
    opacity: 1;
    animation: none;
  }
  .pulsar-reconcile-ledger .pulsar-reconcile-ledger-scanner {
    display: none;
    animation: none;
  }
}

From this family15 in Reconcile

See the family