jQuery

This preloader guide will teach you how to properly add a jQuery preloader to your WordPress website using the Genesis Framework.

Simply create or search google for free preloading .gifs to place in the background: url() in the .preloader class in your CSS.

The CSS

Copy

.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 19999;
	background: url('../images/89.gif') 50% no-repeat #222;
}

The PHP

Copy

add_action( 'genesis_before', 'add_preloader', 1 );
function add_preloader() {
	echo '<div class="preloader"></div>';
}

The jQuery

Copy

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