Color Sorting Bars
Home
Snippets
Color Sorting Bars
HTML
CSS
JS
<div class="container"></div>
body{ margin:0; height:100vh; display:flex; justify-content:center; align-items:center; background:#020617; } .container{ display:flex; align-items:flex-end; height:200px; gap:6px; } .bar{ width:20px; background:linear-gradient(to top,#38bdf8,#a855f7); border-radius:4px; transition:0.4s; }
const container = document.querySelector(".container"); let bars=[]; for(let i=0;i<20;i++){ const div=document.createElement("div"); div.className="bar"; const height=Math.random()*180+20; div.style.height=height+"px"; container.appendChild(div); bars.push(div); } function shuffle(){ bars.forEach(bar=>{ const height=Math.random()*180+20; bar.style.height=height+"px"; }); } setInterval(shuffle,700);
Ad #1
Ad #2
Scroll to Top