Return to previous page

Reply 345570 to: How to change the image lazy loading icon

Rose Tyler

Support staff

January 31, 2023 at 10:44

Hello,

Thank you for the reply.

There is no option to change that loader, but custom CSS code can be used, we will provide you with examples.

Here is the CSS selectors for loader on your web-site
body:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:before, body:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:before, .etheme-elementor-lazy-button:before, .elementor-widget.etheme-loading:before
Here is CSS you may add to make loader as our Time icon

body:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:before, body:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:before, .etheme-elementor-lazy-button:before, .elementor-widget.etheme-loading:before {
    content: '\e949';
    font-family: 'xstore-icons';
    border: none;
    line-height: 1;
    font-size: var(--etheme-elementor-loader-size, 1.5rem);
    animation-duration: .7s;
}

By adding next CSS snippet you will get your logo instead of circle loader

body:not([data-elementor-device-mode]) [class*=elementor-widget-etheme]:before, body:not([data-elementor-device-mode]) [class*=elementor-widget-et-]:before, .etheme-elementor-lazy-button:before, .elementor-widget.etheme-loading:before {
    background-image: url(https://shiningskin.co.il/wp-content/uploads/2023/01/ShiningSkin-LOGO.png);
    background-size: cover;
    animation: none;
    background-repeat: no-repeat;
    width: 200px;
    height: 40px;
    left: calc(50% - 200px / 2);
    top: calc(50% - 40px / 2);
    border-radius: 0;
    border: none;
    background-position: center;
}

Kind Regards,
8theme team

#345570

Go To The Whole Conversation In Topic

Reply 345570 to: How to change the image lazy loading icon

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags: