Checkout Page Loading Spinner

[65kmanspt]

I am trying to add a spinner on my checkout page to display while the credit card info is processing. I used the code referenced in this thread: https://theme.co/apex/forums/topic/how-to-show-spinner-when-checkout-is-processing/#post-602508

It says to add this CSS:
.checkout.woocommerce-checkout.processing {
background-image:url(’//dev.japan-codes.com/wp-content/plugins/woocommerce/assets/images/select2-spinner.gif’);
background-position: center center;
background-repeat: no-repeat;
}

This almost works but the spinner displays behind all of the text boxes on the page. How do I bring the spinner in front of everything on the page?

[rad]

Hi Dan,

Thanks for reaching out.

It could be z-index related, you can change it to this

.checkout.woocommerce-checkout.processing {
background-image:url('//dev.japan-codes.com/wp-content/plugins/woocommerce/assets/images/select2-spinner.gif');
background-position: center center;
background-repeat: no-repeat;
z-index: 999999999999;
}

Else, please provide a sample URL where we can test it.

Thanks!

[65kmanspt]

This still does not fix it

[thai]

Hi @65kmanspt,

Please delete the previous CSS and try with this custom CSS instead:

.checkout.woocommerce-checkout.processing {
    position: relative !important;
}
.checkout.woocommerce-checkout.processing::before {
    background-image:url('https://www.amishgourds.com/wp-content/uploads/2019/05/Spinner-1s-200px.gif');
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 99999;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(255, 255, 255, 0.75);
}

Hope it helps