I implemented this on the Package Control (https://sublime.wbond.net https://sublime.wbond.net) site over the past few months while developing it. To get a smo

I implemented this on the Package Control (https://sublime.wbond.net https://sublime.wbond.net) site over the past few months while developing it. To get a smooth transition from page to page I use Backbone.js with pushState and Handlebars to do client-side rendering of various pages. This allows for nice subtle touches like the logo fading out when navigating to a package detail screen and the search bar animating position when switching from the homepage to the search page. The thing that was missing was any sort of indicator that the page was loading. A progress spinner at least indicates some sort of activity, but can be relatively useless is knowing when something will complete. To provide a better progress indicator, I used a combination of the XHR readyState value, plus the number of total bytes downloaded when in readyState 3 to set the width of a bar. I then used a CSS transition property on the width property to have the bar smoothly grow from one width to another. Originally I had tried using JS to animate the width, but CSS transitions seem to do a much better job of creating a nice smooth animation. The downside is that IE8 and 9 aren't supported, but I just do full page refreshes with them anyway since they do not support pushState.