Audio Bars
Home
Snippets
Audio Bars
HTML
CSS
JS
<div class="bars"> <div class="bar" style="--i:1"></div> <div class="bar" style="--i:2"></div> <div class="bar" style="--i:3"></div> <div class="bar" style="--i:4"></div> <div class="bar" style="--i:5"></div> <div class="bar" style="--i:6"></div> <div class="bar" style="--i:7"></div> <div class="bar" style="--i:8"></div> <div class="bar" style="--i:9"></div> <div class="bar" style="--i:10"></div> <div class="bar" style="--i:11"></div> </div>
body { margin: 0; background: #0f172a; display: flex; justify-content: center; align-items: center; height: 100vh; } .bars { display: flex; gap: 6px; align-items: center; height: 120px; } .bar { width: 6px; background: #38bdf8; border-radius: 3px; animation: pulse 1s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1s); transform-origin: center; } @keyframes pulse { 0%, 100% { height: 20px; } 50% { height: 100px; } }
//javascript
Ad #1
Ad #2
Scroll to Top