Pure CSSMIT licensed

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.

Published Jun 12, 2026

Live Demo

Try it

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

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

Here's a working CSS Spinner from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Wave Bar Equalizer Spinner
Source: https://codefronts.com/motion/css-spinner-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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);
  }
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Spinner from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Wave Bar Equalizer Spinner
Source: https://codefronts.com/motion/css-spinner-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

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.

Gotchas — read before shipping

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.

Techniques used in this demo

@keyframesMDN ↗