Pulse Ring

1<div class="wrap">
2  <span class="ring"></span>
3  <span class="ring d"></span>
4  <span class="dot"></span>
5</div>
6
7<style>
8  .wrap{position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center}
9  .dot{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#06b6d4)}
10  .ring{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #a78bfa;animation:pr 1.6s ease-out infinite}
11  .ring.d{animation-delay:.8s}
12  @keyframes pr{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
13</style>