Custom loading screen

Ok so someone here helped me hide the default loading screen and im grateful for that but now id like to know how to add my own custom loading animation. How should I think of starting something like that?

Hello there,

Thank you for asking.

In order to accomplish that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.preloader .pre-bounce1, .preloader .pre-bounce2 {
    display: none;
.preloader .spinner {
    background-image: url('');
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;


What effect does this have ?