WooCommerce Change AJAX Spinner Gif On Checkout

woocommerce-ajax-checkout-spinner.css

/* 
 * Custom AJAX spinner on WooCommerce checkout 
 * The class used to load the overlay is .blockUI .blockOverlay
 * The class used to load the spinner is .woocommerce .loader:before
 *
 */
.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before {
    height: 3em;
    width: 3em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.5em;
    margin-top: -.5em;
    display: block;
    content: "";
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background: url('http://test-site.com/wp-content/themes/boss-child/images/spinning-logo.gif') center center;
    background-size: cover;
    line-height: 1;
    text-align: center;
    font-size: 2em;
}

This adds the spinner to every overlay (when adding item to cart, removing it, etc.). How could I show it only after the "place order" button is clicked?

@ahac it's not possible due to the way WooCommerce uses the same CSS overlay. You'd need to write some JS in order to achieve what you wanted.

how does one trigger the spinner

@bajoski34 it gets triggered when a payment button has been clicked.

@ahac you can just add -

.woocommerce-checkout.processing before the .blockui class