So fügen Sie der WooCommerce Checkout-Seite ein Ladespinner hinzu

Question

Ich möchte der WooCommerce-Checkout-Seite ein Ladespinner hinzufügen .gif. Es muss angezeigt werden, nachdem die Schaltfläche zum Senden der Zahlung gedrückt wurde.

Ich bin derzeit mit diesem Code:

.checkout.woocommerce-checkout.processing { 
background-image:url('https://wp-content/plugins/woocommerce/assets/images/Preloader_2.gif'); 
background-position: 50% 84%; 
background-repeat: no-repeat; 
} 

ich den Code in Woocommerce.min.css und die preloader Platzierung .gif in der der Dateipfad ist, wie oben angegeben.

Die Datei .gif wird beim Auschecken nicht angezeigt. Ich frage mich, ob die blockUI blockOverlay es versteckt. Ich habe versucht, die blockierende UI zu entfernen mit:

.blockUI.blockingOverlay {display: none;} oder ein z-index von 1001 anwenden, um das .gif zu schichten, aber auch ohne Erfolg.

Ich habe einen Screenshot der blockUI in Firebug beigefügt.

Answer 1

Versuchen Sie dies in Ihrer benutzerdefinierten CSS-Datei:

.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before { 
height: 3em; 
width: 3em; 
position: absolute; 
top: 90%; 
left: 50%; 
margin-left: -.5em; 
margin-top: -.5em; 
display: block; 
content: ""; 
-webkit-animation: none; 
-moz-animation: none; 
animation: none; 
background: url('.../path/wp-content/plugins/woocommerce/assets/images/select2-spinner.gif') center center; 
background-size: cover; 
line-height: 1; 
text-align: center; 
font-size: 2em; 

}