Add a Loading Screen to Genesis

You’ve likely seen them before…when a page is loading, a little icon spins and disappears when the page is done loading. Page loading images can be a nice user experience tool because it lets your viewers know for sure that the page is loading. If you display a lot of media that causes slower page loads, a user might think the page has frozen if all he/she has to look at is a blank screen. Adding a loading image can convey that the page is working and has not frozen. After some research, there are a few plugins available but I decided to type up a quick tutorial on how to create a custom page loading screen in the Genesis Framework. Follow along!

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', 'rv_add_preloader', 1 );
function rv_add_preloader() {
	echo '<div class="preloader"></div>';
}

Add the jQuery

This jQuery script goes into a js file that you can name something like page-loader-init.js.

jQuery(window).load(function() {
	jQuery(".preloader").fadeOut("slow");
})

Save this file to your child-theme’s /js directory. From there, you will need to enqueue it using:

add_action( 'wp_enqueue_scripts', 'rv_enqueue_preloader_script' );
function rv_enqueue_preloader_script() {
	wp_enqueue_script( 'page-loader-init', get_stylesheet_directory_uri() . '/js/page-loader-init.js', array( 'jquery' ), CHILD_THEME_VERSION );
}

Add some CSS

Add this CSS to your style.css:

.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('[path-to-gif-file]') 50% 50% no-repeat rgb(255,255,255);
}

That’s it! If you are a designer and wish to design your own loading gif, awesome. Otherwise, check out Preloaders.net to create and download a free gif.