Live Voice Waveform Bars
Seventeen rounded bars rise and fall at their own tempos under a center weighted envelope, like a mic picking up speech. Each bar alternates on its own duration, so the pattern never visibly repeats.
Also known as: voice waveform animation css, audio bars animation, listening animation, sound wave bars css.
Listening
HTML
<div class="aia-live-voice-waveform" role="status" aria-label="Listening">
<div class="aia-live-voice-waveform-bars" aria-hidden="true">
<i style="--h: 0.18; --d: 0.9s; --o: -0.00s"></i>
<i style="--h: 0.26; --d: 0.74s; --o: -0.37s"></i>
<i style="--h: 0.34; --d: 1.02s; --o: -0.74s"></i>
<i style="--h: 0.46; --d: 0.66s; --o: -0.11s"></i>
<i style="--h: 0.58; --d: 0.88s; --o: -0.48s"></i>
<i style="--h: 0.7; --d: 0.58s; --o: -0.85s"></i>
<i style="--h: 0.84; --d: 0.8s; --o: -0.22s"></i>
<i style="--h: 0.94; --d: 0.62s; --o: -0.59s"></i>
<i style="--h: 1; --d: 0.76s; --o: -0.96s"></i>
<i style="--h: 0.9; --d: 0.6s; --o: -0.33s"></i>
<i style="--h: 0.8; --d: 0.84s; --o: -0.70s"></i>
<i style="--h: 0.68; --d: 0.56s; --o: -0.07s"></i>
<i style="--h: 0.56; --d: 0.92s; --o: -0.44s"></i>
<i style="--h: 0.44; --d: 0.7s; --o: -0.81s"></i>
<i style="--h: 0.34; --d: 0.98s; --o: -0.18s"></i>
<i style="--h: 0.24; --d: 0.78s; --o: -0.55s"></i>
<i style="--h: 0.16; --d: 0.86s; --o: -0.92s"></i>
</div>
<span class="aia-live-voice-waveform-label">Listening</span>
</div>CSS
.aia-live-voice-waveform {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
display: grid;
justify-items: center;
gap: 1em;
}
.aia-live-voice-waveform-bars {
display: flex;
align-items: center;
gap: 0.32em;
height: 6em;
}
.aia-live-voice-waveform-bars i {
width: 0.42em;
height: 0.5em;
border-radius: 1em;
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 45%, #fff));
box-shadow: 0 0 0.6em color-mix(in srgb, var(--c) 35%, transparent);
animation: aia-live-voice-waveform-talk var(--d) cubic-bezier(0.45, 0, 0.55, 1) var(--o) infinite alternate;
}
.aia-live-voice-waveform-label {
font-size: 0.9em;
font-weight: 500;
color: color-mix(in srgb, currentColor 65%, transparent);
}
@keyframes aia-live-voice-waveform-talk {
0% { height: 0.5em; }
45% { height: calc(0.5em + var(--h) * 3.2em); }
70% { height: calc(0.5em + var(--h) * 2.1em); }
100% { height: calc(0.5em + var(--h) * 5.5em); }
}
@media (prefers-reduced-motion: reduce) {
.aia-live-voice-waveform-bars i { animation: none; height: calc(0.5em + var(--h) * 2.6em); }
}
@media (prefers-reduced-motion: reduce) {
.aia-live-voice-waveform, .aia-live-voice-waveform *, .aia-live-voice-waveform::before, .aia-live-voice-waveform::after, .aia-live-voice-waveform *::before, .aia-live-voice-waveform *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.