Woocommerce Responsive Loader Spinner

Question

1. I tried to use a 100% Pure CSS Loader, It works! But it's not responsive.
2. There is a JQuery function that generate the DIVs structure that loads the loader and after the spinner loads, then all desappears

If i'm not wrong, this is the scriptblock on the library that generates the Loader

if (opts.theme)
 lyr2 = $('<div class="blockUI blockOverlay ui-widget-overlay" style="z-index:'+ (z++) +';display:none"></div>');
else
 lyr2 = $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) +';display:flex; background:red;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>');

This is the file path for the scriptblock \wp-content\plugins\woocommerce\assets\js\jquery-blockui\jquery.blockUI.js

Here is the code generated on the Load moment:

<div class="blockUI" style="display:none"></div>

<div class="blockUI blockOverlay" style="
z-index: 1000;
border:none;
margin: 0px;
padding: 0px;
width: 100%;
height:100%;
top: 0px;
left: 0px;
background: rgb(255,255,255);
opacity: 0.6;
cursor: default;
position: absolute;">
</div>

If we can find out where is this code in the whole woocommerce files, then we can alter his behavior to responsive.

Could someone give a help please?

Answer 1

There is no need to alter live plugin code especially for Woo-commerce. There is another way you can make it responsive. The way is Custom CSS. For more details custom css