Return to previous page

Change the circular loading animation on checkout page

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

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
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
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
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
mnpiracha

Participant

September 2, 2024 at 11:16

Excellent!

Grateful!

Best Regards
Najeeb

#412708 Copied

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: best selling woocommerce, change loading animation, checkout page customization, circular loading animation, improve checkout experience, woocommerce themes
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

Change the circular loading animation on checkout page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection