Hello Summer Sale!
Exclusive season-opening discount on TheGem theme.
Limited time offer.

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,280
    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