How to add ajax loading icon after click add to cart button on woocommerce

Question

I would like to add a loading icon after a user clicks on add to cart for an item on woocommerce single page.

i am using below code in my site

jQuery('a.add_to_cart_button').click(function(){
    jQuery(this).append('<img src="/spinner.gif" width="20px" height="20px"/>')
});

But this code displaying the Load icon on Add to cart Button. I want to show the Spinner on the website like as checkout page spinner.

Also It works well after user clicks the 'Add to Cart' button, but I want to remove this icon after successful execution.

Please help me !!

Answer 1

Try add code to .success stage and write code remove icon here

(Addcartbutton img).remove()