Return to previous page

Change the circular loading animation on checkout page

This topic has 6 replies, 3 voices, and was last updated 2 weeks, 4 days ago ago by Andrew Mitchell

  • Avatar: mnpiracha
    mnpiracha
    Participant
    August 29, 2024 at 08:12

    Hi
    I want to change the small circular loading animation which appear while order is placed.

    I want to change it to a bigger more prominent animation which should be quickly visible.

    Please guide me how can I do that.

    Regards

    #412133 Copied Theme version: 9.3.18
    5 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    August 30, 2024 at 04:35

    Hi @mnpiracha,

    Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
.woocommerce-checkout .blockUI.blockOverlay::before {
    width: 60px;
    height: 60px;
}

    Hope it helps!

    #412277 Copied
    Avatar: mnpiracha
    mnpiracha
    Participant
    August 30, 2024 at 08:41

    Dear Luca
    Thank you for the help. It did increase the size and so it’s a bit more visible. But since its light greay in color and very thin so still not quickly recognizable. Is there a way we can use another colorful custom svg for this?

    #412311 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    August 30, 2024 at 09:38

    Hi @mnpiracha,

    In this case, you can try with this custom CSS code instead:

    
.woocommerce-checkout .blockUI.blockOverlay {
    background: url(https://www.svgrepo.com/show/530597/hat.svg) no-repeat center center !important;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0 ,0, 0.2) !important;
    position: absolute;
    background-size: 200px auto !important;
}

.woocommerce-checkout .blockUI.blockOverlay::before {
    display: none;
}

    Hope it helps!

    #412319 Copied
    Avatar: mnpiracha
    mnpiracha
    Participant
    September 2, 2024 at 11:16

    Excellent!

    Grateful!

    Best Regards
    Najeeb

    #412708 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    September 2, 2024 at 11:17

    Dear mnpiracha,

    We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

    Click here to spread the love: https://themeforest.net/downloads

    Thank you for being an integral part of our journey!

    Best Regards,
    The 8Theme Team

    #412709 Copied

  • Tagged: , , , , ,

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Change the circular loading animation on checkout page’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Marseille 01 – WordPress WooCommerce Theme
lazy-placeholder
Lawyer – WordPress WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Car Parts Store – WordPress WooCommerce Theme
lazy-placeholder
Shoes Store – WordPress WooCommerce Theme
lazy-placeholder
Kidsstore – WooCommerce Theme
lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Business – WordPress WooCommerce Theme
lazy-placeholder
Coffee Store – WooCommerce Theme
lazy-placeholder
X-Phone Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.