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;    }

Yes. 

But you can add the code I gave you in the style.css of the child theme and make the changes there, nothing will be lost.