<div class="container mt-5">
  <div class="row justify-content-center">
  <div class="col-4">
    
    
    <form>
      <button type="submit"  class="btn btn-warning btn-lg btn-block">Click Me</button>
    </form>
    
    <form class="mt-4">
      <button type="submit"  class="btn btn-outline-primary btn-lg btn-block">Click Me</button>
    </form>
    
    
      </div>

  
</div>
</div>

form{
  display: block;
  width: 100%;
}

button{
  position: relative;
  
  &:before {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -12px;
    width: 24px;
    height: 24px;
    border: 2px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s;
    animation: 0.8s linear infinite rotate;
  }
  &.sending{
    pointer-events: none;
    cursor: not-allowed;
    
    &:before {
      transition-delay: 0.5s;
      transition-duration: 1s;
      opacity: 1;
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

$('form').on('submit',function(e){
  e.preventDefault();
  var but = $(this).find('[type="submit"]').toggleClass('sending').blur();
  
  setTimeout(function(){
     but.removeClass('sending').blur();
  },4500);
  
})