{}
pulse loader
css
js
html
libs + Add Library
HTML
<div class="pulse_loader"> <div class="pls p1"></div> <div class="pls p2"></div> </div>
CSS
.pulse_loader { position: relative; height: 80px; width: 80px; margin: 50px auto; } .pulse_loader .pls { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid; border-radius: 50%; animation: plse 1.4s infinite; width: 70%; height: 70%; transform: scale(0); } .pulse_loader .p1 { width: 100%; height: 100%; border-color: #0082ed; } .pulse_loader .p2 { width: 70%; height: 70%; animation-delay: .5s; border-color: #ff0000; } @keyframes plse { 0% { opacity: 1; transform: scale(0); } 100% { opacity: .2; transform: scale(1); } }
JS