Loader Full page

Loader Full page

class ChangeBlockUI {

	public $overlay_text = 'Processing';

	public function __construct() {
		add_action( 'wfacp_after_checkout_page_found', [ $this, 'remove_actions' ] );
		add_action( 'wfacp_internal_css', [ $this, 'internal_css' ] );
	}

	public function remove_actions() {
		add_action( 'wp_footer', [ $this, 'add_js' ] );
	}

	public function internal_css() {
		?>
        <style>
            .loader {
                color: #fff;
                position: relative;
                box-sizing: border-box;
                left: -9999px;
                top: -9999px;
                width: 0;
                height: 0;
                overflow: hidden;
                z-index: 999999;

            }

            .loader:after,
            .loader:before {
                box-sizing: border-box;

            }

            .loader.is-active {
                background-color: rgba(0, 0, 0, 0.60);
                width: 100%;
                height: 100%;
                left: auto;
                top: auto;
                position: fixed;
            }

            .loader.is-active:after,
            .loader.is-active:before {
                display: block;
            }

            .blockUI:before {

                display: none;
            }


            @keyframes rotation {
                0% {
                    transform: rotate(0);
                }
                to {
                    transform: rotate(359deg);
                }
            }


            .loader[data-text]:before {
                position: absolute;
                left: 0;
                top: 50%;
                color: currentColor;

                text-align: center;
                width: 100%;
                font-size: 14px;
            }

            .loader[data-text=""]:before {
                content: "Loading";
            }

            .loader[data-text]:not([data-text=""]):before {
                content: attr(data-text);
            }


            .loader-default[data-text]:before {
                top: calc(50% - 63px);
            }

            .loader-default:after {
                content: "";
                position: absolute;
                width: 48px;
                height: 48px;
                border: 8px solid #fff;
                border-left-color: transparent;
                border-radius: 50%;
                top: calc(50% - 24px);
                left: calc(50% - 24px);
                animation: rotation 1s linear infinite;

            }


        </style>
		<?php
	}


	public function add_js() {

		?>
        <script>

            window.addEventListener('load', function () {
                (function ($) {
                    var block_settings = {
                        message: '',
                    };

                    function stripe_selected() {
                        return jQuery('#payment_method_fkwcs_stripe:checked').length > 0;
                    }

                    $(document).ajaxSend(function (event, jqxhr, settings) {
                     
                        if (settings.url.indexOf('wc-ajax=checkout') > -1) {
                            $('.wfacp_checkout_form blockUI').hide();
                            $('body #wfacp_checkout_form').prepend('<div id="loader" class="loader loader-default is-active"  data-text="<?php echo $this->overlay_text; ?>"></div>');
                            $('body #wfacp_checkout_form').block(block_settings);
                        }
                    });
                    $(document).ajaxComplete(function (event, jqxhr, settings) {
                        if (settings.url.indexOf('wc-ajax=checkout') > -1) {
                            $('body').unblock();
                            $('body #loader').remove();
                            $('.wfacp_checkout_form blockUI').show();
                        }
                    });


                })(jQuery);
            });
        </script>

		<?php
	}
}


new ChangeBlockUI();