You can accomplish this by setting a class on the body and removing it with JS when the page is loaded. This is just a basic example but it’ll work out of the box.
// Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
// add 'class-name' to the $classes array
$classes[] = 'preloader-visible';
// return the $classes array
return $classes;
}
// Add preloader style
add_action('wp_head', function(){ ?>
<style>
/** let's every child of body know there is a loader visible */
body.preloader-visible {
background:red;
}
/** by default loader is hidden */
body > .loader {
display:none;
}
/** when loader is active the loader will show */
body.preloader-visible > .loader {
display:block;
}
</style>
<?php
});
// Remove preloader when document is ready
add_action('wp_footer', function(){ ?>
<script>
(function($){
$(function () {
$('body').removeClass('preloader-visible');
});
})(jQuery);
</script>
<?php
});