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.
Well, now what?
Work with Me
I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!
Leave some Feedback
Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. 😀