<div class="pulse-wrapper">
  <div class="pulse"></div>  
</div>
/* this is to keep you loading wrapper on the middle of screen */
div.pulse-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

div.pulse {
  height: 50px;
  width: 50px;
  background-color: rgb(199, 153, 8);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
    40% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(199, 153, 8, 0.3);
    }

    80% {
        transform: scale(1);
        box-shadow: 0 0 0 40px rgba(199, 153, 8, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(199, 153, 8, 0)
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.