25 CSS Spinners 06 / 25

Wave Bar Equalizer Spinner

Seven vertical bars oscillate like an audio level meter, scaling from a flat line to full height in a symmetric wave pattern using staggered CSS animation delays.

Pure CSS MIT licensed

Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="sp-06">
  <div class="sp-06__bars">
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
  </div>
</div>

<div class="sp-06">
  <div class="sp-06__bars">
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
    <div class="sp-06__bar"></div>
  </div>
</div>

.sp-06,.sp-06 *,.sp-06 *::before,.sp-06 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-06{
  --bg:#020c14;
  --c1:#00e676;
  --c2:#00bcd4;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-06__bars{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:56px;
}
.sp-06__bar{
  width:8px;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(to top,var(--c1),var(--c2));
  box-shadow:0 0 6px var(--c1);
  animation:sp-06-eq 1s ease-in-out infinite;
}
.sp-06__bar:nth-child(1){animation-delay:0s;height:20px}
.sp-06__bar:nth-child(2){animation-delay:0.1s;height:35px}
.sp-06__bar:nth-child(3){animation-delay:0.2s;height:50px}
.sp-06__bar:nth-child(4){animation-delay:0.3s;height:35px}
.sp-06__bar:nth-child(5){animation-delay:0.4s;height:20px}
.sp-06__bar:nth-child(6){animation-delay:0.3s;height:35px}
.sp-06__bar:nth-child(7){animation-delay:0.2s;height:50px}
@keyframes sp-06-eq{
  0%,100%{transform:scaleY(0.3)}
  50%{transform:scaleY(1)}
}
@media (prefers-reduced-motion: reduce){
  .sp-06__bar{animation:none;transform:scaleY(0.6)}
}

.sp-06,.sp-06 *,.sp-06 *::before,.sp-06 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-06{
  --bg:#020c14;
  --c1:#00e676;
  --c2:#00bcd4;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
}
.sp-06__bars{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:56px;
}
.sp-06__bar{
  width:8px;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(to top,var(--c1),var(--c2));
  box-shadow:0 0 6px var(--c1);
  animation:sp-06-eq 1s ease-in-out infinite;
}
.sp-06__bar:nth-child(1){animation-delay:0s;height:20px}
.sp-06__bar:nth-child(2){animation-delay:0.1s;height:35px}
.sp-06__bar:nth-child(3){animation-delay:0.2s;height:50px}
.sp-06__bar:nth-child(4){animation-delay:0.3s;height:35px}
.sp-06__bar:nth-child(5){animation-delay:0.4s;height:20px}
.sp-06__bar:nth-child(6){animation-delay:0.3s;height:35px}
.sp-06__bar:nth-child(7){animation-delay:0.2s;height:50px}
@keyframes sp-06-eq{
  0%,100%{transform:scaleY(0.3)}
  50%{transform:scaleY(1)}
}
@media (prefers-reduced-motion: reduce){
  .sp-06__bar{animation:none;transform:scaleY(0.6)}
}

How this works

Seven div elements are laid out in a flex row with align-items:flex-end so all bars share a common baseline. Each bar has a fixed natural height (smaller at the edges, tallest in the centre) and animates via sp-06-eq which drives scaleY from 0.3 to 1. The transform-origin defaults to centre, so bars grow both up and down — anchoring them to the bottom by setting transform-origin:bottom is optional for a ground-locked feel.

Each bar's animation-delay is offset by 0.1s increments, creating a sine-wave propagation across the row. The gradient fill from green (--c1) to cyan (--c2) gives the bars a frequency-spectrum colour range familiar from equalizer UIs.

Customize

Add more bars by inserting additional div.sp-06__bar elements and extending the animation-delay pattern with 0.1s increments.
Change the colour gradient by editing --c1 (base) and --c2 (top) — a red-to-orange palette works well for a retro VU meter look.
Set transform-origin:bottom on .sp-06__bar to lock bars to the baseline so they only grow upward.
Reduce animation-duration from 1s to 0.6s to simulate faster BPM music.
Replace the fixed height values with CSS custom properties (--h) and randomise them at build-time for an organic, non-symmetric equalizer.

Watch out for

scaleY on flex children with align-items:flex-end can cause a visual gap at the bottom in some browsers if transform-origin is not explicitly set — test and pin if needed.
The box-shadow glow combined with scaleY animation repaints the shadow on every frame in browsers that do not promote the element to its own layer.
Using more than 12 bars per equalizer on a mobile screen can overflow the viewport — cap bar count or reduce bar width proportionally.

Browser support

Chrome	Safari	Firefox	Edge
60+	12+	60+	60+

Uses only flexbox and transform animations; universally supported.

More from 25 CSS Spinners

Clock Tick Sweep Spinner Infinity Loop Stroke Spinner Bouncing Elastic Dots Spinner Spiral Galaxy CSS Spinner Glassmorphism Loader Spinner Cyberpunk Segmented Ring Spinner Breathing Circle Loader Particle Scatter Burst Spinner Retro TV Static Noise Loader Liquid Blob CSS Spinner Progress Arc Fill Spinner Matrix Rain Column Spinner

View the full collection →