Pace.js, from HubSpot, is pretty cool. It’s a page load progress bar that usually sits at the top of your website. The Minimial theme for Pace, which I like the best, gets hidden by the WordPress admin bar if you have it enabled. There’s a few different themes though, most work just fine with the WordPress admin bar.
HubSpot describes Pace better than I can.
Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.
No need to hook into any of your code, progress is detected automatically.
functions.php file, just call the cdnjs file instead of a local file. You will, however, have to host the Pace theme CSS locally, which is usually tiny, unless you choose one of the more animated themes. I personally like the Center Simple theme the best.
wp_enqueue_style() call below loads
/css/pace.css from your theme’s stylesheet directory. That’s the file that should contain the CSS provided by the Pace theme download.
functions.php file already contains a
add_action( 'wp_enqueue_scripts', 'load_scripts' ), find the function it calls, and add
wp_enqueue_script there instead of making a new function like the example above.
I’ll show how to create your own functionality plugin within the next few posts/days. If you want notified of when exactly it’s posted, subscribe below. Look for the Get New Posts via E-Mail heading.
Update: There’s a plugin to do this, too.