Как добавить загрузчик для загрузки в WooCommerce Оформить заказ

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. Я попытался снять блокирующий пользовательский интерфейс с помощью:

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

}