Web Development: Show preloader icon after clicking on 'Place Order' button

The Problem:

Currently, when an individual clicks the Place Order button, the page fades to a transparent white while payment is being submitted. Due to outside limitations of individuals such as internet connectivity, this page may sit for a while and my visitors are prone to hit the back or refresh button which causes double payment in some cases.

Is there a way to replace the transparent white with a preloader/spinner of some sort to help indicate that the payment is still processing?

The Solution:

1) Choose a preloader from https://icons8.com/preloaders/
or https://www.idrive.com/images/ide_loading_new.gif

2) Download the preloader to your local computer

3) Upload it to WordPress

4) Copy the url to your preloader as it now appears in your WordPress install

5) Replace URL_TO_YOUR_PRELOADER in the following code with the url to your preloader

/* Checkout page processing spinner */
.woocommerce-checkout.processing .blockUI.blockOverlay {
background-image:url('URL_TO_YOUR_PRELOADER') !important;
background-position: center 50% !important;
background-repeat: no-repeat !important;
position: fixed !important;
}

6) Copy the above code as you modified it into your WP Admin -> Customizer -> Additional CSS

7) Click “Publish”

8) Give it a whirl!