Animated Bars
Home
Snippets
Animated Bars
HTML
CSS
JS
<div class="bars"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #111; margin: 0; } .bars { display: flex; gap: 8px; align-items: flex-end; height: 80px; } .bar { width: 10px; height: 20px; background: #ff4757; animation: bounce 1.2s infinite ease-in-out alternate; } .bar:nth-child(2) { animation-delay: 0.2s; background: #ffa502; } .bar:nth-child(3) { animation-delay: 0.4s; background: #2ed573; } .bar:nth-child(4) { animation-delay: 0.6s; background: #1e90ff; } .bar:nth-child(5) { animation-delay: 0.8s; background: #3742fa; } @keyframes bounce { 0% { height: 20px; } 100% { height: 80px; } }
//javascript
Ad #1
Ad #2
Scroll to Top