Verification

CSS

A fluctuating waveform aligning with a stable baseline.

Tier: CSS
Dependencies: None
Duration: 4.5 s, loops
Categories: Loaders and spinners
Use cases: Loading and waiting, Security and trust
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-verify-title" class="pulsar pulsar-reconcile-verify" data-pulsar="reconcile-verify" role="img" viewBox="0 0 120 40"><title id="reconcile-verify-title">Verification</title><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path id="reconcile-verify-baseline" stroke-dasharray="4 4" d="M20 20h80"></path><path id="reconcile-verify-waveform" d="m20 20 2-8 2 8h4l2-8 2 8h4l2-8 2 8h4l2-8 2 8h4l2-8 2 8h4l2-8 2 8h4l2-8 2 8h4l2-8 2 8h4l2-8 2 8h4l2-8 2 8"></path></g></svg>

animation.css

.pulsar-reconcile-verify #reconcile-verify-waveform {
  animation: reconcile-verify-waveform-main 4500ms linear infinite;
  transform-box: view-box;
}

.pulsar-reconcile-verify #reconcile-verify-baseline {
  animation: reconcile-verify-baseline-pulse 4500ms linear infinite;
}

@keyframes reconcile-verify-waveform-main {
  0% {
    d: path(
      'M20 20L21 10L24 20L27 20L31 14L32 20L35 20L38.5 11L40 20L43 20L45.5 15L48 20L51 20L55.5 13L56 20L59 20L60.5 10L64 20L67 20L70.2 14L72 20L75 20L77.8 12L80 20L83 20L87 16L88 20L91 20L93 11L96 20'
    );
    transform: translateX(0);
    stroke-width: 2;
  }
  3.125% {
    transform: translateX(4px);
  }
  6.25% {
    transform: translateX(0);
  }
  9.375% {
    transform: translateX(4px);
  }
  12.5% {
    transform: translateX(0);
  }
  15.625% {
    transform: translateX(4px);
  }
  18.75% {
    transform: translateX(0);
  }
  21.875% {
    transform: translateX(4px);
  }
  25% {
    d: path(
      'M20 20L21 10L24 20L27 20L31 14L32 20L35 20L38.5 11L40 20L43 20L45.5 15L48 20L51 20L55.5 13L56 20L59 20L60.5 10L64 20L67 20L70.2 14L72 20L75 20L77.8 12L80 20L83 20L87 16L88 20L91 20L93 11L96 20'
    );
    transform: translateX(0);
  }
  60% {
    d: path(
      'M20 20L22 12L24 20L28 20L30 12L32 20L36 20L38 12L40 20L44 20L46 12L48 20L52 20L54 12L56 20L60 20L62 12L64 20L68 20L70 12L72 20L76 20L78 12L80 20L84 20L86 12L88 20L92 20L94 12L96 20'
    );
    stroke-width: 2;
  }
  70% {
    stroke-width: 2.4;
  }
  80% {
    d: path(
      'M20 20L22 12L24 20L28 20L30 12L32 20L36 20L38 12L40 20L44 20L46 12L48 20L52 20L54 12L56 20L60 20L62 12L64 20L68 20L70 12L72 20L76 20L78 12L80 20L84 20L86 12L88 20L92 20L94 12L96 20'
    );
    stroke-width: 2;
  }
  100% {
    d: path(
      'M20 20L21 10L24 20L27 20L31 14L32 20L35 20L38.5 11L40 20L43 20L45.5 15L48 20L51 20L55.5 13L56 20L59 20L60.5 10L64 20L67 20L70.2 14L72 20L75 20L77.8 12L80 20L83 20L87 16L88 20L91 20L93 11L96 20'
    );
  }
}

@keyframes reconcile-verify-baseline-pulse {
  0%,
  60%,
  80%,
  100% {
    stroke-width: 2;
  }
  70% {
    stroke-width: 2.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-verify #reconcile-verify-waveform,
  .pulsar-reconcile-verify #reconcile-verify-baseline {
    animation: none;
    stroke-width: 2;
  }
  .pulsar-reconcile-verify #reconcile-verify-waveform {
    d: path(
      'M20 20L22 12L24 20L28 20L30 12L32 20L36 20L38 12L40 20L44 20L46 12L48 20L52 20L54 12L56 20L60 20L62 12L64 20L68 20L70 12L72 20L76 20L78 12L80 20L84 20L86 12L88 20L92 20L94 12L96 20'
    );
    transform: none;
  }
}