i have tried to animate my button but somehow it won't work on diff button width

Question

I am developing a store in which i want animatied buttons for my store and i'm trying to animate my button on click but the problem i have been facing is when the width of button is changed on responsive devices animation is not working properly. i am trying to archive this using liquid in shopify with jq and css only.

$(".ProductForm__AddToCart").click(function() {
  var animation = $('.ProductForm__AddToCart.Button');
   $(animation).removeClass("Button--primary");
    $(animation).addClass("is_loading");
    $(animation).find('span.pulse_anim').addClass('dot-pulses');
  $(animation).find('.custom-addtocart, .custom-addtocart:after , .Button__SeparatorDot, .custom-addtocart,  .custom-cart-icon, .custom-cart-text').css("visibility","hidden"); 


 setTimeout(function(){;
      $(animation).addClass("Button--primary");
  $(animation).removeClass("is_loading");
  $(animation).find('span.pulse_anim').removeClass('dot-pulses');
  $(animation).find('.custom-addtocart, .custom-addtocart:after, .Button__SeparatorDot, .custom-addtocart,  .custom-cart-icon, .custom-cart-text').css("visibility","visible");
  },50000);
  


});

.is_loading{background:white !important; border:1px solid #8AB8AE;}
.dot-pulses {
  position: relative;
  left: -9865px;
  min-width: 10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
/*   background-color: #9880ff;
  color: #9880ff; */
  box-shadow: 15px 0 0 -5px #9880ff;
  animation: dotPulse 1.5s infinite linear;
  animation-delay: .25s;
}

.dot-pulses::before, .dot-pulses::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
/*   background-color: #9880ff;
  color: #9880ff; */
}

.dot-pulses::before {
  box-shadow:0px 0 0 -5px #9880ff;
  left:-4px;
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}

.dot-pulses::after {
  box-shadow: 30px 0 0 -5px #9880ff;
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s;
}

  
  
  
@keyframes dotPulseBefore {
  0% {
    box-shadow: 0px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 0px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 0px 0 0 -5px #9880ff;
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 15px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 15px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 15px 0 0 -5px #9880ff;
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 30px 0 0 -5px #9880ff;
  }
  30% {
    box-shadow: 30px 0 0 2px #9880ff;
  }
  60%,
  100% {
    box-shadow: 30px 0 0 -5px #9880ff;
  }
}


  .grecaptcha-badge{display:none;}
  .Footer.About_footer {
    margin-top: 0;
}
  
  .unique_about-us .PageContent {
    margin-bottom: 40px;
}

  <button type="submit" class="ProductForm__AddToCart Button">
    
      <span class="pulse_anim"></span>
        <span class="custom-addtocart"></span>
    <span class="Button__SeparatorDot"></span>
    <span class="custom-addtocart"></span>
  </button>