How to change the image lazy loading icon

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

  • Avatar: shahar klamka
    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

    4 Answers
    Avatar: Rose Tyler
    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

    Avatar: shahar klamka
    shahar klamka
    Participant
    January 31, 2023 at 09:17

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

    Its a loading circle

    Avatar: shahar klamka
    shahar klamka
    Participant
    January 31, 2023 at 10:11
    Avatar: Rose Tyler
    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

  • Viewing 5 results - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.