Pace Loader js in Genesis

This tutorial provides the steps to add a pace loader feature in Genesis. The loader design can be changed and one can tweak it ownself.

STEP 1

Download pace.js from GitHub and paste the pace.js file into the child-theme/js/ folder.

STEP 2

Enqueue this js file using this in functions.php

//* Load pace.js
add_action( 'wp_enqueue_scripts', 'load_pace_script', 5 );
function load_pace_script() {
	wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/pace.js', array(), CHILD_THEME_VERSION );
}

STEP 3

Add some styles. Paste this in style.css

/*  Pace.js LOader
  ------------------------- */
.pace {
	-webkit-pointer-events:none;
	pointer-events:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}

.pace-inactive {
	display:none;
}

.pace .pace-progress {
	background:#000;
	position:fixed;
	z-index:2000;
	top:0;
	right:100%;
	width:100%;
	height:3px;
}

.pace .pace-progress-inner {
	display:block;
	position:absolute;
	right:0;
	width:100px;
	height:100%;
	box-shadow:0 0 10px #000000,0 0 5px #000;
	opacity:1;
	-webkit-transform:rotate(3deg) translate(0px,-4px);
	-moz-transform:rotate(3deg) translate(0px,-4px);
	-ms-transform:rotate(3deg) translate(0px,-4px);
	-o-transform:rotate(3deg) translate(0px,-4px);
	transform:rotate(3deg) translate(0px,-4px);
}

.pace .pace-activity {
	display:block;
	position:fixed;
	z-index:999999;
	top:25px;
	right:5px;
	width:20px;
	height:20px;
	border:solid 2px transparent;
	border-top-color:#000;
	border-left-color:#000;
	border-radius:10px;
	-webkit-animation:pace-spinner 500ms linear infinite;
	-moz-animation:pace-spinner 500ms linear infinite;
	-ms-animation:pace-spinner 500ms linear infinite;
	-o-animation:pace-spinner 500ms linear infinite;
	animation:pace-spinner 500ms linear infinite;
}

@-webkit-keyframes pace-spinner {
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	
	100% {
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@-moz-keyframes pace-spinner {
	0% {
		-moz-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	
	100% {
		-moz-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@-o-keyframes pace-spinner {
	0% {
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	
	100% {
		-o-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@-ms-keyframes pace-spinner {
	0% {
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	
	100% {
		-ms-transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

@keyframes pace-spinner {
	0% {
		transform:rotate(0deg);
		transform:rotate(0deg);
	}
	
	100% {
		transform:rotate(360deg);
		transform:rotate(360deg);
	}
}

or this

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: #29d;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
  transform: translateX(100%) translateY(-100%) rotate(45deg);
  pointer-events: none;
}

.pace.pace-active .pace-activity {
  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.pace .pace-activity::before,
.pace .pace-activity::after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 30px;
    left: 50%;
    display: block;
    border: 5px solid #fff;
    border-radius: 50%;
    content: '';
}

.pace .pace-activity::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: rgba(0, 0, 0, .2);
    border-left-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite;
    animation: pace-theme-corner-indicator-spin 3s linear infinite;
}

.pace .pace-activity::after {
    bottom: 50px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border-top-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite;
    animation: pace-theme-corner-indicator-spin 1s linear infinite;
}

@-webkit-keyframes pace-theme-corner-indicator-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-theme-corner-indicator-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

Grab some more design options from the official Hubspot site.

Tweak the CSS as per your requirement.

done.

I don’t recommend you to use a page loader as it will create one additional request from the server. It is good if you want some loading style on your site.