SOURCE

$(function() {
  $(document).on('click', function(e) {
    var x = e.clientX;
    var y = e.clientY;
    $('body').append($('.loader-ripple-w')).find('.loader-ripple-w').show().css({
      top: y - 50,
      left: x - 50
    });
    return false;
  });
});

<div class="wrapper">
  <div class="loader-ripple-w">
    <div class="loader-ripple"></div>
    <div class="loader-ripple loader-ripple2"></div>
  </div>
</div>

<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>

body {
  background: #555;
}

.wrapper {
  width: 50px;
  height: 1400px;
  background: #444;
}

.loader-ripple-w {
  width: 100px;
  height: 100px;
  pointer-events: none;
  position: fixed;
  z-index: 214748;
  display: none;
}

.loader-ripple {
  width: 100px;
  height: 100px;
  border-radius: 55%;
  background-color: #fff;
  opacity: .4;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0);
  -webkit-animation: ripple 1.2s ease-out;
  animation: ripple 1.2s ease-out;
}

.loader-ripple2 {
  -webkit-animation-delay: -.25s;
  animation-delay: -.25s;
}

@keyframes ripple {
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}