Pulsar
Ledger Scan: A vertical line scanning a ledger and highlighting matches

Ledger Scan

CSS

A vertical scanning line moves across a dual-column spreadsheet layout, highlighting matching row entries in sequence.

Tier
CSS
Dependencies
None
Duration
5.2 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
loopminimalui

Companion assets

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

Animated
Ledger Scan: A vertical line scanning a ledger and highlighting matches
CSS tier
Static vector
Ledger Scan, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="reconcile-ledger-title" class="pulsar pulsar-reconcile-ledger" data-pulsar="reconcile-ledger" role="img" viewBox="0 0 120 40"><title id="reconcile-ledger-title">Ledger Scan: A vertical line scanning a ledger and highlighting matches</title><rect id="reconcile-ledger-frame" width="80" height="30" x="20" y="5" fill="none" stroke="currentColor" stroke-width="1.5"></rect><line id="reconcile-ledger-divider" x1="60" x2="60" y1="5" y2="35" fill="none" stroke="currentColor" stroke-width="1.5"></line><line x1="20" x2="100" y1="12.5" y2="12.5" fill="none" stroke="currentColor" stroke-width=".5" class="reconcile-ledger-row-line" opacity=".3"></line><line x1="20" x2="100" y1="20" y2="20" fill="none" stroke="currentColor" stroke-width=".5" class="reconcile-ledger-row-line" opacity=".3"></line><line x1="20" x2="100" y1="27.5" y2="27.5" fill="none" stroke="currentColor" stroke-width=".5" class="reconcile-ledger-row-line" opacity=".3"></line><line id="reconcile-ledger-h1-l" x1="25" x2="55" y1="8.75" y2="8.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-h1-r" x1="65" x2="95" y1="8.75" y2="8.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-h2-l" x1="25" x2="55" y1="16.25" y2="16.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-h2-r" x1="65" x2="95" y1="16.25" y2="16.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-h3-l" x1="25" x2="55" y1="23.75" y2="23.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-h3-r" x1="65" x2="95" y1="23.75" y2="23.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-h4-l" x1="25" x2="55" y1="31.25" y2="31.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-h4-r" x1="65" x2="95" y1="31.25" y2="31.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" opacity="0"></line><line id="reconcile-ledger-scanner" x1="20" x2="20" y1="5" y2="35" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" opacity="0"></line></svg>

animation.css

.pulsar-reconcile-ledger #reconcile-ledger-scanner {
  animation: reconcile-ledger-scan 5200ms linear infinite;
}
.pulsar-reconcile-ledger [id^='reconcile-ledger-h'] {
  animation-duration: 5200ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.pulsar-reconcile-ledger #reconcile-ledger-h1-l,
.pulsar-reconcile-ledger #reconcile-ledger-h1-r {
  animation-name: reconcile-ledger-h1;
}
.pulsar-reconcile-ledger #reconcile-ledger-h2-l,
.pulsar-reconcile-ledger #reconcile-ledger-h2-r {
  animation-name: reconcile-ledger-h2;
}
.pulsar-reconcile-ledger #reconcile-ledger-h3-l,
.pulsar-reconcile-ledger #reconcile-ledger-h3-r {
  animation-name: reconcile-ledger-h3;
}
.pulsar-reconcile-ledger #reconcile-ledger-h4-l,
.pulsar-reconcile-ledger #reconcile-ledger-h4-r {
  animation-name: reconcile-ledger-h4;
}

.pulsar-reconcile-ledger #reconcile-ledger-frame,
.pulsar-reconcile-ledger #reconcile-ledger-divider,
.pulsar-reconcile-ledger .reconcile-ledger-row-line {
  animation: reconcile-ledger-out 5200ms linear infinite;
}

@keyframes reconcile-ledger-scan {
  0%,
  5% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    transform: translateX(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  50%,
  80% {
    transform: translateX(80px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95%,
  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}

@keyframes reconcile-ledger-h1 {
  0%,
  12%,
  18%,
  50% {
    opacity: 0;
  }
  15%,
  55%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes reconcile-ledger-h2 {
  0%,
  22%,
  28%,
  50% {
    opacity: 0;
  }
  25%,
  55%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes reconcile-ledger-h3 {
  0%,
  32%,
  38%,
  50% {
    opacity: 0;
  }
  35%,
  55%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes reconcile-ledger-h4 {
  0%,
  42%,
  48%,
  50% {
    opacity: 0;
  }
  45%,
  55%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes reconcile-ledger-out {
  0%,
  85% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-ledger #reconcile-ledger-scanner,
  .pulsar-reconcile-ledger [id^='reconcile-ledger-h'],
  .pulsar-reconcile-ledger #reconcile-ledger-frame,
  .pulsar-reconcile-ledger #reconcile-ledger-divider,
  .pulsar-reconcile-ledger .reconcile-ledger-row-line {
    animation: none;
  }
  .pulsar-reconcile-ledger #reconcile-ledger-scanner {
    transform: translateX(80px);
    opacity: 1;
  }
  .pulsar-reconcile-ledger [id^='reconcile-ledger-h'] {
    opacity: 1;
  }
  .pulsar-reconcile-ledger #reconcile-ledger-frame,
  .pulsar-reconcile-ledger #reconcile-ledger-divider {
    opacity: 1;
  }
  .pulsar-reconcile-ledger .reconcile-ledger-row-line {
    opacity: 0.3;
  }
}