woocommerce how show loading icon when click add to cart button - woocommerce

Question

I want to show a spinner icon while the 'Add To Cart' button is processing.
I'm using this code:
jQuery('a.add_to_cart_button').click(function(){
jQuery(this).append('<img src="/spinner.gif" width="20px" height="20px"/>')});
It works well after user clicks the 'Add to Cart' button, but I want to remove this icon after successful execution.

Answer 1

It's no need to use your own loader or spinner icon because WooCommerce itself provides its own loader in front end. Here is the flow to use the code of loader.
As soon as add to cart button is clicked. Add this line in your click function, it adds loader in a particular section
block( $( 'div.summary.entry-summary' ) );
Now when the product is successfully added to cart and your ajax response is success add this line to remove the loader. It removes the loader from that section.
unblock( $( 'div.summary.entry-summary' ) );
This code blocks and unblocks a particular section, if you want you can increase its scope by specifying the element you want.
These are the functions responsible for applying and removing the loader.
var is_blocked = function( $node ) {
return $node.is( '.processing' ) || $node.parents( '.processing' ).length;
};
var block = function( $node ) {
if ( ! is_blocked( $node ) ) {
$node.addClass( 'processing' ).block( {
message: null,
overlayCSS: {
background: '#fff',
opacity: 0.6
}
} );
}
};
var unblock = function( $node ) {
$node.removeClass( 'processing' ).unblock();
};