Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #1924737
Change Loading Icon
Closed

Comments

  • mminten started the conversation

    Is there a way to change the loading icon? It is blue and I would like to get one that is more neutral colored.

  •  7,095
    Oliver replied

    HI!

    You need to edit: wp-content/themes/thegem/css/thegem-preloader.cssĀ 

    Or use next css:

    body #page-preloader {    background: #2c2e3d;
    }
    body #page-preloader .page-preloader-spin,
    body .block-preloader .page-preloader-spin,
    body .preloader-spin {    border: 2px solid transparent;    border-top-color: #b9b7ff;
    }
    body .preloader-spin {    border-top-color: #b9b7ff;
    }
    body #page-preloader .page-preloader-spin:before,
    body .block-preloader .page-preloader-spin:before,
    body .preloader-spin:before {    border: 2px solid transparent;    border-top-color: #00bcd4;
    }
    body .preloader-spin:before {    border-top-color: #00bcd4;
    }
    body #page-preloader .page-preloader-spin:after,
    body .block-preloader .page-preloader-spin:after,
    body .preloader-spin:after {    border: 2px solid transparent;    border-top-color: #a3e7f0;
    }
    body .preloader-spin:after {    border-top-color: #7b97ab;
    }
    

    In order to change loader to your image, use this css:

    #page-preloader.preloader-loaded .page-preloader-spin {    background-image: URL('URL_OF_THE_IMAGE');    background-size: cover;    width: 150px;    height: 150px;    border: none;
    }
    #page-preloader.preloader-loaded .page-preloader-spin:before
    #page-preloader.preloader-loaded .page-preloader-spin:after {    display: none;    }
    

    Please note if you comment on your ticket before we reply, your ticket will be pushed down of the tickets list. 

    Regards, Oliver