Pulsar
Balance Check: Two bars aligning on a central guideline

Balance Check

CSS

Two horizontal balancing bars bob up and down, gradually aligning perfectly on a central guideline before restarting.

Tier
CSS
Dependencies
None
Duration
4 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
Balance Check: Two bars aligning on a central guideline
CSS tier
Static vector
Balance Check, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="reconcile-balance-title" class="pulsar pulsar-reconcile-balance" data-pulsar="reconcile-balance" role="img" viewBox="0 0 120 40"><title id="reconcile-balance-title">Balance Check: Two bars aligning on a central guideline</title><line id="reconcile-balance-guideline" x1="20" x2="100" y1="20" y2="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"></line><line id="reconcile-balance-left" x1="25" x2="55" y1="10" y2="10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4"></line><line id="reconcile-balance-right" x1="65" x2="95" y1="30" y2="30" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4"></line></svg>

animation.css

.pulsar-reconcile-balance #reconcile-balance-guideline {
  animation: reconcile-balance-guideline-main 4000ms linear infinite;
}

.pulsar-reconcile-balance #reconcile-balance-left {
  animation: reconcile-balance-left-main 4000ms linear infinite;
}

.pulsar-reconcile-balance #reconcile-balance-right {
  animation: reconcile-balance-right-main 4000ms linear infinite;
}

@keyframes reconcile-balance-guideline-main {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
    animation-timing-function: linear;
  }
  85% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes reconcile-balance-left-main {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  20% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  40% {
    transform: translateY(15px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  70% {
    transform: translateY(10px);
    animation-timing-function: linear;
  }
  85% {
    transform: translateY(10px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

@keyframes reconcile-balance-right-main {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  20% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  40% {
    transform: translateY(-15px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  70% {
    transform: translateY(-10px);
    animation-timing-function: linear;
  }
  85% {
    transform: translateY(-10px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-balance #reconcile-balance-guideline,
  .pulsar-reconcile-balance #reconcile-balance-left,
  .pulsar-reconcile-balance #reconcile-balance-right {
    animation: none;
  }
  .pulsar-reconcile-balance #reconcile-balance-guideline {
    opacity: 1;
  }
  .pulsar-reconcile-balance #reconcile-balance-left {
    transform: translateY(10px);
    opacity: 1;
  }
  .pulsar-reconcile-balance #reconcile-balance-right {
    transform: translateY(-10px);
    opacity: 1;
  }
}