Audio Waveform Loader: Pure CSS Loading Animation

Audio Waveform Loader

A static waveform of rounded bars fills with color from left to right like a voice message playing, then fades back. One SVG clipPath holds the bars, one scaled rect does the fill.

Also known as: voice message waveform, podcast waveform animation, audio scrubber loader.

Color Size 64px Dark background

HTML

<div class="ldr-audio-waveform" role="status" aria-label="Loading">
  <svg viewBox="0 0 62 24" aria-hidden="true">
    <defs>
      <clipPath id="ldr-audio-waveform-bars">
        <rect x="0" y="9" width="2" height="6" rx="1" />
        <rect x="4" y="7" width="2" height="10" rx="1" />
        <rect x="8" y="4" width="2" height="16" rx="1" />
        <rect x="12" y="6" width="2" height="12" rx="1" />
        <rect x="16" y="2" width="2" height="20" rx="1" />
        <rect x="20" y="5" width="2" height="14" rx="1" />
        <rect x="24" y="8" width="2" height="8" rx="1" />
        <rect x="28" y="3" width="2" height="18" rx="1" />
        <rect x="32" y="1" width="2" height="22" rx="1" />
        <rect x="36" y="6" width="2" height="12" rx="1" />
        <rect x="40" y="4" width="2" height="16" rx="1" />
        <rect x="44" y="7" width="2" height="10" rx="1" />
        <rect x="48" y="5" width="2" height="14" rx="1" />
        <rect x="52" y="8" width="2" height="8" rx="1" />
        <rect x="56" y="6" width="2" height="12" rx="1" />
        <rect x="60" y="9" width="2" height="6" rx="1" />
      </clipPath>
    </defs>
    <g clip-path="url(#ldr-audio-waveform-bars)">
      <rect class="ldr-audio-waveform-track" width="62" height="24" />
      <rect class="ldr-audio-waveform-fill" width="62" height="24" />
    </g>
  </svg>
</div>

CSS

.ldr-audio-waveform {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 2.4);
  height: calc(var(--s) * 0.93);
}
.ldr-audio-waveform svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ldr-audio-waveform-track { fill: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent); }
.ldr-audio-waveform-fill {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ldr-audio-waveform-play 2.6s linear infinite;
}
@keyframes ldr-audio-waveform-play {
  0%       { transform: scaleX(0); opacity: 1; }
  78%      { transform: scaleX(1); opacity: 1; }
  86%      { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-audio-waveform, .ldr-audio-waveform *, .ldr-audio-waveform::before, .ldr-audio-waveform::after, .ldr-audio-waveform *::before, .ldr-audio-waveform *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Audio Waveform Loader

HTML

CSS

Customizing this loader

Similar loaders