Skip to content

Snippet: Simple Site Pre-loader

Total has a built-in site loading and page animation function however, if you just want a very simple pre-loader that shows up while your site is loading it's very easy to do with a little PHP and CSS.

// PHP Portion - this goes in your child theme's functions.php file
// Insert pre-loader
add_action( 'wpex_outer_wrap_before', function() {
	echo '<div class="my-preloader"><img src="LOADER_IMAGE_URL" /></div>';
}, 1 );

/* CSS portion goes in your child theme style.css and must be modified to fit your needs/wants */
#outer-wrap {
    opacity: 0;
    visibility: hidden;

body.wpex-window-loaded .my-preloader {
    display: none;

body.wpex-window-loaded #outer-wrap {
    opacity: 1;
    visibility: visible;
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top