HTML
CSS
JS
Run
<div class="sound-loader m-20"> <span></span> <span></span> <span></span> </div>
.sound-loader { display: inline-block; position: relative; width: 55px; height: 80px; } .sound-loader span { display: inline-block; position: absolute; left: 8px; width: 5px; background: #8612ad; animation: sound-loader-animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; } .sound-loader span:nth-child(1) { left: 8px; animation-delay: -0.24s; } .sound-loader span:nth-child(2) { left: 24px; animation-delay: -0.12s; } .sound-loader span:nth-child(3) { left: 40px; animation-delay: 0; } @keyframes sound-loader-animation { 0% { top: 8px; height: 72px; } 50% { top: 16px; height: 36px; } 100% { top: 24px; height: 16px; } }
<script>N/A</script>
Press Ctrl+Space Key for Auto complete and Intelli Sense
