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

Snippet Type: PHP

Posted Under: Other

All PHP snippets should be added via a child theme's functions.php file.