How to change preloader:
1.1. To change the background color of pre loading screen:
Add the code below in your child themes style.css or inside your Customizer >> Custom CSS and JS >> Custom CSS box And then replace #c02127 with your own background color:
/* preloader styles */
.preloader {
background-color: #c02127;
}
1.2. Following code is the coffee_cup is a css animation. To change the coffee_cup, add the following into your child themes style.css and modify/replace as necessary:
/*coffee cup*/
.coffee_cup {
width: 40px;
height: 50px;
border: 2px #6b6957 solid;
border-radius: 0 0 5px 5px;
position: relative;
margin: 36px auto;
}
.coffee_cup:after,
.coffee_cup:before {
position: absolute;
content: '';
}
.coffee_cup:after {
width: 10px;
height: 20px;
border: 2px #6b6957 solid;
border-left: none;
border-radius: 0 20px 20px 0;
left: 40px;
top: 5px;
}
.coffee_cup:before {
width: 3px;
height: 10px;
background-color: #6b6957;
top: -16px;
left: 12px;
box-shadow: 5px 0 0 0 #6b6957,
5px -5px 0 0 #6b6957,
10px 0 0 0 #6b6957;
-webkit-animation: steam 700ms linear infinite alternate;
animation: steam 700ms linear infinite alternate;
}
Add custom GIF Animations
2.1 To add your own GIF files etc. and further customize the preloader, we recommend a Preloader by WordPress Monsters Plugin
You can install this plugin via your WP Dashboard.
Note: If you chose to use Preloader by WordPress, you will also need to disable the default preloader by going to Appearance >> Customize >> Header >> Preloader Display and unchecking the “Enable Preloader” box.
Thank you