How do I change WooCommerce checkout loading spinner gif

Question

I want to modify the WooCommerce checkout loading spinner gif and use my custom icon and text

Answer 1

To change WooCommerce checkout loading spinner text and gif with your custom ones then follow the steps below.  

• Step 1: Upload your custom spinner gif to your images folder using FTP or cPanel 
• Step 2: Add the code below to the functions.php file in your theme

//add custom WooCommerce checkout spinner button

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/orangeloader.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
}

• Step 3: Change images/orangeloader.gif with your gif path or location
• Step 4: Replace the Word Processing... with your custom Word 
• Step 5: Save changes

You are done