Add a spinner to Add to Basket and Place Order buttons in WooCommerce

I am using an upload option on products and want to show a spinner on both the Add to Basket button and Place Order button on the final checkout page. The code below is for a spinner but I am unsure which class to use or how to trigger this (PHP or jQuery)

Here is the example theme:

https://demo.themeisle.com/hestia/product/mens-classic-regular-fit-jean/

/* 
* 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('https://loading.io/spinners/spin/lg.ajax-spinner-gif.gif') center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
}

Here is the HTML code for the buttons

/* Checkout Button */
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

/* Add to basket Button */
<button type="submit" name="add-to-cart" value="15" class="single_add_to_cart_button button alt">Add to basket</button>

Or even use Font Awesome, rather than a hosted gif? The slight issue is it needs to be triggered when actually adding to cart other than when it is clicked and perhaps an option isn't filled out.

from Add a spinner to Add to Basket and Place Order buttons in WooCommerce