WooCommerce Checkoutページにローディングスピナーを追加する方法

Question

ローディングスピナー.gifをWooCommerceのチェックアウトページに追加したいとします。送信ボタンを押した後に表示する必要があります。

.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; 
} 

私はWoocommerce.min.cssにコードを配置していますし、上記の指定されたファイルパスにある.GIFプリローダー：

私は現在、このコードを使用しています。

チェックアウト時に.gifが全く表示されません。私はblockUI blockOverlayがそれを隠しているのだろうかと思っています。ブロックされたUIを削除しようとしました：

.blockUI.blockingOverlay {display: none;}またはz-indexの1001を適用して.gifをレイヤーすることはできません。

blockUIのスクリーンショットをFirebugに添付しました。

Answer 1

カスタムCSSファイルでこれを試してみてください：

.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; 

を}