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