Record Matching

CSS

Two columns of offset horizontal line segments slide vertically, stopping as corresponding pairs illuminate and fuse.

Tier: CSS
Dependencies: None
Duration: 4.8 s, loops
Categories: Loaders and spinners
Use cases: Loading and waiting, Sync and integration
Industries: Finance and fintech, Cross-industry
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

CSS tier

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="reconcile-match-title" class="pulsar pulsar-reconcile-match" data-pulsar="reconcile-match" role="img" viewBox="0 0 120 40"><title id="reconcile-match-title">Record Matching: Two columns of lines sliding and aligning</title><defs><g id="reconcile-match-left-set"><line x1="32.5" x2="47.5" y1="-15" y2="-15"></line><line x1="32.5" x2="47.5" y1="-5" y2="-5"></line><line x1="32.5" x2="47.5" y1="5" y2="5"></line><line x1="32.5" x2="47.5" y1="15" y2="15"></line><line x1="32.5" x2="47.5" y1="25" y2="25"></line><line x1="32.5" x2="47.5" y1="35" y2="35"></line><line x1="32.5" x2="47.5" y1="45" y2="45"></line><line x1="32.5" x2="47.5" y1="55" y2="55"></line></g><g id="reconcile-match-right-set"><line x1="72.5" x2="87.5" y1="-15" y2="-15"></line><line x1="72.5" x2="87.5" y1="-5" y2="-5"></line><line x1="72.5" x2="87.5" y1="5" y2="5"></line><line x1="72.5" x2="87.5" y1="15" y2="15"></line><line x1="72.5" x2="87.5" y1="25" y2="25"></line><line x1="72.5" x2="87.5" y1="35" y2="35"></line><line x1="72.5" x2="87.5" y1="45" y2="45"></line><line x1="72.5" x2="87.5" y1="55" y2="55"></line></g></defs><g id="reconcile-match-left" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><use href="#reconcile-match-left-set"></use></g><g id="reconcile-match-right" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><use href="#reconcile-match-right-set"></use></g></svg>

animation.css

.pulsar-reconcile-match #reconcile-match-left {
  animation: reconcile-match-left-main 4800ms linear infinite;
}

.pulsar-reconcile-match #reconcile-match-right {
  animation: reconcile-match-right-main 4800ms linear infinite;
}

@keyframes reconcile-match-left-main {
  0% {
    transform: translateY(0);
    opacity: 1;
    stroke-width: 2;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  30% {
    transform: translateY(20px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  60% {
    transform: translateY(20px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  70% {
    transform: translateY(20px);
    stroke-width: 2.5;
    opacity: 1;
  }
  85% {
    transform: translateY(20px);
    stroke-width: 2.5;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    transform: translateY(20px);
    stroke-width: 2.5;
    opacity: 0;
  }
  100% {
    transform: translateY(20px);
    stroke-width: 2.5;
    opacity: 0;
  }
}

@keyframes reconcile-match-right-main {
  0% {
    transform: translateY(0);
    opacity: 1;
    stroke-width: 2;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  30% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  60% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  70% {
    transform: translateY(-20px);
    stroke-width: 2.5;
    opacity: 1;
  }
  85% {
    transform: translateY(-20px);
    stroke-width: 2.5;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    transform: translateY(-20px);
    stroke-width: 2.5;
    opacity: 0;
  }
  100% {
    transform: translateY(-20px);
    stroke-width: 2.5;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-match #reconcile-match-left,
  .pulsar-reconcile-match #reconcile-match-right {
    animation: none;
  }
  .pulsar-reconcile-match #reconcile-match-left {
    transform: translateY(20px);
    stroke-width: 2.5;
    opacity: 1;
  }
  .pulsar-reconcile-match #reconcile-match-right {
    transform: translateY(-20px);
    stroke-width: 2.5;
    opacity: 1;
  }
}