Posted on April 28, 2014 by Chris Harrington

Page change progress bar for jQuery-enabled single page applications

Leaf is a single page application, which means that only a portion of the page changes when navigating between pages. This has a number of benefits that I don’t want do delve into at the moment, but suffice to say it trades (optionally) longer initial page load time for speedier navigation and potentially fancier page transitions. One of the downsides, however, is that the developer has to build his or her own method of informing the user that a page change is taking place. I’ve noticed recently that YouTube does an excellent job of this. It puts a “line” progress bar at the top of the page that shows up when you click on a YouTube video to watch. The line behaves like Safari’s progress bar; it jumps a little at first to say, “hey, your page load progress is here!” and then completes as the new content loads. It’s slick and subtle and I like it, and I’m going to show you how you can do it yourself.

To start with, I’m using the excellent Nanobar library. It’s what lets you put the progress bar at the top (or wherever) of the page. First, obviously, include the Nanobar javascript file in your SPA’s root page.

Continue reading