This topic has 6 replies, 3 voices, and was last updated 3 months, 2 weeks ago ago by Andrew Mitchell
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
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!
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?
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!
Excellent!
Grateful!
Best Regards
Najeeb
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
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