Latency

CSS

A round-trip measure overshoots, oscillates and settles onto its true reading.

Tier: CSS
Dependencies: None
Duration: 4 s, loops
Categories: Loaders and spinners
Use cases: Loading and waiting, Dashboards and reporting
Industries: SaaS and software, Security and identity
Style: Minimal line · light stroke
Set: signal
Tags: loopminimaluiscalefade

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="signal-latency-title" class="pulsar pulsar-signal-latency" data-pulsar="signal-latency" role="img" viewBox="0 0 120 40"><title id="signal-latency-title">Latency</title><line id="signal-latency-track" x1="20" x2="100" y1="24" y2="24" stroke="currentColor" stroke-width="2" opacity=".2"></line><line id="signal-latency-active" x1="20" x2="100" y1="24" y2="24" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="signal-latency-active"></line><g id="signal-latency-needle" class="signal-latency-needle"><line y1="12" y2="24" stroke="currentColor" stroke-linecap="round" stroke-width="2"></line><circle cy="12" r="2" fill="var(--pulsar-accent, currentColor)"></circle></g><circle id="signal-latency-target-ring" cx="70" cy="24" r="4" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="signal-latency-target-ring"></circle></svg>

animation.css

/* Signal Latency
   A round-trip measure overshoots, oscillates and settles onto its true reading. */

.pulsar-signal-latency .signal-latency-active {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  opacity: 0;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-name: signal-latency-active-anim;
}

.pulsar-signal-latency .signal-latency-needle {
  transform: translateX(20px);
  opacity: 0;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-name: signal-latency-needle-anim;
}

.pulsar-signal-latency .signal-latency-target-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-name: signal-latency-target-ring-anim;
}

@keyframes signal-latency-needle-anim {
  0% {
    transform: translateX(20px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* travel */
  }
  6% {
    opacity: 1;
  }
  25% {
    transform: translateX(90px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* travel */
  }
  45% {
    transform: translateX(60px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* travel */
  }
  65% {
    transform: translateX(75px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* settle */
  }
  80%,
  94% {
    transform: translateX(70px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); /* fade */
  }
  100% {
    transform: translateX(70px);
    opacity: 0;
  }
}

@keyframes signal-latency-active-anim {
  0% {
    stroke-dashoffset: 80;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* travel */
  }
  6% {
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 10;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* travel */
  }
  45% {
    stroke-dashoffset: 40;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); /* travel */
  }
  65% {
    stroke-dashoffset: 25;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* settle */
  }
  80%,
  94% {
    stroke-dashoffset: 30;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); /* fade */
  }
  100% {
    stroke-dashoffset: 30;
    opacity: 0;
  }
}

@keyframes signal-latency-target-ring-anim {
  0%,
  80% {
    transform: scale(1);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); /* fade */
  }
  80.1% {
    transform: scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); /* fade */
  }
  94%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-signal-latency .signal-latency-active {
    animation: none;
    stroke-dashoffset: 30;
    opacity: 1;
  }
  .pulsar-signal-latency .signal-latency-needle {
    animation: none;
    transform: translateX(70px);
    opacity: 1;
  }
  .pulsar-signal-latency .signal-latency-target-ring {
    animation: none;
    opacity: 0;
  }
}