Issues with checkout processing animation

Hi there,

I have a serious problem with the checkout process. Lately latency with both my PSP’s has been gotten worse and people don’t wait until payment info is transferred fully before closing the purchase windows or refreshing the browser.

Why? After clicking on the payment button that whole checkout form becomes slightly brighter and the loading animation which is supposed to be on the bottom next to the action button, appears in the middle of the form.

The user has to scroll all the way up and if he’s lucky he will find a small not easy to detect animation indicating that the payment is being processed. Otherwise he will just be waiting for a few seconds until he get’s unsecure about the whole thing and closes the windows, hereby cancelling the purchase.

I’ve had many of these cases the past few days which is very frustrating when you consider that the conversion was completed to 99% and only during the last step fails due to technical/design issues.

Is there a way I can CHANGE the animation to appear on the bottom next to the payment button?`
Is there a way to display an image/custom animation at the buttom next to the payment button?
Is there a way I can scroll the page automatically to the center of the form where the animation is being displayed after clicking on payment?

I have found 2 different .css customizations but unfortunately I didn’t have any success both of them:

.checkout.woocommerce-checkout.processing {
    background-image:url('IMAGELINK');
    background-position: center center;
    background-repeat: no-repeat;
}

I just inserted the code as customized css but do you think it’s being overridden by some core woo files?

Thanks,
Diego