Here is CSS code snippet to change the loader with an image
.blockOverlay:after,
.widget_shopping_cart .product_list_widget:before,
.basel-products-loader:after,
.blog-footer .basel-blog-load-more:after,
.blog-footer .basel-portfolio-load-more:after,
.blog-footer .basel-products-load-more:after,
.portfolio-footer .basel-blog-load-more:after,
.portfolio-footer .basel-portfolio-load-more:after,
.portfolio-footer .basel-products-load-more:after,
.products-footer .basel-blog-load-more:after,
.products-footer .basel-portfolio-load-more:after,
.products-footer .basel-products-load-more:after,
.basel-search-dropdown .basel-search-wrapper .basel-search-inner form.search-loading:after,
.basel-search-full-screen .basel-search-inner form.search-loading:after,
.search-extended form.search-loading:after,
.yith-wcwl-add-to-wishlist a:after,
div.single-product-content .entry-summary .button.compare:after,
.add_to_cart_button:after,
.product-grid-item .product-element-top:after,
.basel-buttons .quick-view > a.loading:before,
.basel-buttons .product-compare-button > a.loading:before {
border: none;
background-image: url(https://demo.xtemos.com/basel/wp-admin/images/wordpress-logo.svg);
background-size: cover;
}
Regards