Pulsar
Wave loader

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
Themeable
Yes. Inherits currentColor and reads --pulsar-accent.
Version
1.0.0, added 2026-09-08
Licence
To be confirmed. See the repository LICENSE.

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;
  }
}