Spinner whilst awaiting payment confirmation

When we pit i this code , we get a static square image which is not at all like our animated gif,…

add_action('wp_head', 'custom_woocommerce_checkout_spinner_blogies', 1000 );
function custom_woocommerce_checkout_spinner_blogies() {
    ?>
    <style>
    .woocommerce .blockUI.blockOverlay:before,
    .woocommerce .loader:before {
        height: 7em;
        width: 7em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.5em;
        margin-top: -.5em;
        display: block;
        position: fixed;
        content: "Processing...";
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;
        background-image:url('<?php echo get_stylesheet_directory_uri() . "/images/spinner.gif"; ?>') !important;
        background-position: center center;
        background-size: cover;
        line-height: 7;
        text-align: center;
        font-size: 2em;
        color:white;
        background-color: green;
        
    }
    </style>
    <?php
}

Hi @cullachie

Thanks for reaching out!

I understand that you’d like to add a “spinner” or a “please wait” message while awaiting payment confirmation from Stripe to improve the user experience on your WooCommerce store, correct?

This is a bit of a complicated topic that would need some customization to address. Unfortunately, custom coding is not something we can assist with directly. However, I’ll keep this thread open for a bit to see if anyone from the community can lend a hand.

If you have any other questions related to development or custom coding, don’t hesitate to reach out to some of the great resources we have available for support. The WooCommerce community is filled with talented open-source developers, and many of them are active on the channels listed below:

• WooCommerce Developer Resources Portal
• WooCommerce Advanced Facebook group
• WooCommerce Developer Slack Channel
• Hire a WooCommerce Expert

Hope this helps!