Return to previous page

Topic: How to change the image lazy loading icon

shahar klamka

Participant

January 30, 2023 10:58 am

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

I cannot find where to change it
Theme version: 9.0.2

#345405 copied to clipboard

Rose Tyler

Support staff

January 30, 2023 11:06 am

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 to clipboard

shahar klamka

Participant

January 31, 2023 9:17 am

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

Its a loading circle

#345549 copied to clipboard

shahar klamka

Participant

January 31, 2023 10:11 am

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

#345564 copied to clipboard
Rose Tyler

Support staff

January 31, 2023 10:44 am
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 to clipboard