Return to previous page

How to change the image lazy loading icon

This topic has 5 replies, 2 voices, and was last updated 1 years, 2 months ago ago by Rose Tyler

shahar klamka

Participant

January 30, 2023 at 10:58

I am trying to change the circle loading icon to another one.

I cannot find where to change it

#345405 Copied Theme version: 9.0.2

4 Answers

Rose Tyler

Support staff

January 30, 2023 at 11:06

Hello,

Could you provide URL of your site and screenshots of the icon and place where you want to change it?

Kind Regards,
8theme team

#345408 Copied

shahar klamka

Participant

January 31, 2023 at 09:17

Here:
https://prnt.sc/n73C-eXndEib

Its a loading circle

#345549 Copied

shahar klamka

Participant

January 31, 2023 at 10:11

another screen:
https://prnt.sc/aQ5bcw48wlD3

#345564 Copied
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 Copied
Tagged: change, icon, image, lazy loading, templates, woocommerce, wordpress
Viewing 5 results - 1 through 5 (of 5 total)