Bank Feed Sync

CSS

Horizontal bars from opposing sides interlocking into a continuous track.

Tier: CSS
Dependencies: None
Duration: 4.2 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: loopbarsstagger

Companion assets

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

Animated

CSS tier

Static vector

Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="reconcile-statement-title" class="pulsar pulsar-reconcile-statement" data-pulsar="reconcile-statement" role="img" viewBox="0 0 120 40"><title id="reconcile-statement-title">Bank Feed Sync</title><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><line id="reconcile-statement-a1" x1="-24" x2="0" y1="12" y2="12"></line><line id="reconcile-statement-a2" x1="-24" x2="0" y1="16" y2="16"></line><line id="reconcile-statement-a3" x1="-24" x2="0" y1="20" y2="20"></line><line id="reconcile-statement-b1" x1="120" x2="144" y1="20" y2="20"></line><line id="reconcile-statement-b2" x1="120" x2="144" y1="24" y2="24"></line><line id="reconcile-statement-b3" x1="120" x2="144" y1="28" y2="28"></line></g></svg>

animation.css

.pulsar-reconcile-statement line {
  animation-duration: 4200ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.pulsar-reconcile-statement #reconcile-statement-a1 {
  animation-name: reconcile-statement-a-slide;
  animation-delay: -630ms;
}
.pulsar-reconcile-statement #reconcile-statement-a2 {
  animation-name: reconcile-statement-a-slide;
  animation-delay: -420ms;
}
.pulsar-reconcile-statement #reconcile-statement-a3 {
  animation-name: reconcile-statement-a3-slide;
  animation-delay: -210ms;
}
.pulsar-reconcile-statement #reconcile-statement-b1 {
  animation-name: reconcile-statement-b1-slide;
  animation-delay: -420ms;
}
.pulsar-reconcile-statement #reconcile-statement-b2 {
  animation-name: reconcile-statement-b-slide;
  animation-delay: -210ms;
}
.pulsar-reconcile-statement #reconcile-statement-b3 {
  animation-name: reconcile-statement-b-slide;
  animation-delay: 0ms;
}

@keyframes reconcile-statement-a-slide {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50%,
  75% {
    transform: translateX(60px);
    opacity: 1;
  }
  85%,
  95% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes reconcile-statement-a3-slide {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  50%,
  75% {
    transform: translate(60px, 4px);
    opacity: 1;
  }
  85%,
  95% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes reconcile-statement-b-slide {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50%,
  75% {
    transform: translateX(-60px);
    opacity: 1;
  }
  85%,
  95% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes reconcile-statement-b1-slide {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  50%,
  75% {
    transform: translate(-60px, -4px);
    opacity: 1;
  }
  85%,
  95% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-statement line {
    animation: none !important;
  }
  .pulsar-reconcile-statement #reconcile-statement-a1,
  .pulsar-reconcile-statement #reconcile-statement-b3 {
    opacity: 0;
  }
  .pulsar-reconcile-statement #reconcile-statement-a2 {
    transform: translateX(60px);
  }
  .pulsar-reconcile-statement #reconcile-statement-b1 {
    transform: translate(-60px, -4px);
  }
  .pulsar-reconcile-statement #reconcile-statement-a3 {
    transform: translate(60px, 4px);
  }
  .pulsar-reconcile-statement #reconcile-statement-b2 {
    transform: translateX(-60px);
  }
}