Pre-loader in Genesis

You’ve likely seen them before when a page is loading.
Page loaders are great as an indicator to the visitor that your page is working and it can also help build anticipation……so make sure the content is worth it.
This is a simple script that will enable you to add a page loader onto a Genesis Framework website.

Add the Action to genesis_before

There are probably different hooks you can use to insert the following function but I used the genesis_before action.

add_action( 'genesis_before', 'ggg_add_preloader', 1 );
function ggg_add_preloader() {
echo ';}

Add the Genesis Tab Footer scripts

This jQuery script goes into the footer scripts under the Genesis Tab.

$(window).load(function() {
		$(".preloader").delay(500).fadeOut('slow');
	});

Save this to the top of the CSS style sheet

.front-page .preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 19999;
	background: url('Put a direct link to your gif here') 50% no-repeat #222;
}