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.