Wave Loader

CSS

Three rounded bars rising and falling in sequence, a quiet indeterminate wait state.

Tier: CSS
Dependencies: None
Duration: 1.2 s, loops
Categories: Loaders and spinners
Use cases: Loading and waiting
Industries: SaaS and software, Cross-industry
Style: Minimal line · light stroke
Set: terminal
Tags: loopbarsminimalui

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="wave-loader-title" class="pulsar pulsar-wave-loader" data-pulsar="wave-loader" role="img" viewBox="0 0 120 40"><title id="wave-loader-title">Wave loader</title><g id="wave-loader-bars" fill="currentColor"><rect id="wave-loader-bar-1" width="12" height="24" x="33" y="8" class="wave-loader-bar" rx="6"></rect><rect id="wave-loader-bar-2" width="12" height="24" x="54" y="8" class="wave-loader-bar" rx="6"></rect><rect id="wave-loader-bar-3" width="12" height="24" x="75" y="8" class="wave-loader-bar" rx="6"></rect></g></svg>

animation.css

.pulsar-wave-loader .wave-loader-bar {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: wave-loader-rise 1200ms ease-in-out infinite;
}

.pulsar-wave-loader #wave-loader-bar-1 {
  animation-delay: -400ms;
}

.pulsar-wave-loader #wave-loader-bar-2 {
  fill: var(--pulsar-accent, currentColor);
  animation-delay: -200ms;
}

.pulsar-wave-loader #wave-loader-bar-3 {
  animation-delay: 0ms;
}

@keyframes wave-loader-rise {
  0%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-wave-loader .wave-loader-bar {
    animation: none;
    transform: none;
    opacity: 1;
  }
}