HTML
CSS
JS
Run
<div class="ripple-loader m-50"> <span></span> <span></span> </div>
.ripple-loader { display: inline-block; position: relative; width: 80px; height: 80px; } .ripple-loader span { position: absolute; border: 4px solid #8612ad; opacity: 1; border-radius: 50%; animation: ripple-loader-animation 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .ripple-loader span:nth-child(2) { animation-delay: -0.5s; } @keyframes ripple-loader-animation { 0% { top: 90px; left: 90px; width: 0; height: 0; opacity: 0; } 10% { top: 20px; left: 20px; width: 0; height: 0; opacity: 0; } 11% { top: 90px; left: 90px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 110px; height: 110px; opacity: 0; } }
<script>N/A</script>
Press Ctrl+Space Key for Auto complete and Intelli Sense
