show progressbar while loading pages using jquery ajax in single page website

Question

I have a basic page with a navigation bar on top, and a wrapper body.

Whenever a user clicks on a navigation link it uses .load to load the page content

Answer 1

Allow me to refer you to this page , it desribes how you can add a progress event listener to the xhr object (which only works in these browsers, in older browsers you simply have rely on the same base you're currently using) in jquery.

For reference I have copied the relevant code below (you would only be interested in the 'Download progress' part probably):

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

Do allow me to say though that this is a lot of overkill for a single page website and only really becomes useful for large files. Additionally images and similar media aren't handled in this way and you would need to monitor the loading of images (or do it yourself through ajax) to make such a system perfect.

Here is a JSFiddle showing this in action: http://jsfiddle.net/vg389mnv/1/

Answer 2

The above answer is correct (upvoted). A custom xhr request works well, I tested it with your code (and a bigger file to see actual progress), might as well copy it here:

$('.ajaxspl').on('click',function(e){
    e.preventDefault();

    var url=$(this).data('url'), wrap=$('body #wrap');

    //clean the wrapper
    wrap.slideUp().html('');

    //load page into wrapper
    console.log('starting ajax request');
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    $('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
                }
            });
            return xhr;
        }, 
        type: 'POST', 
        url: url, 
        data: {}, 
        complete: function(response, status, xhr) {
            console.log(response)
            wrap.html(response.responseText);
            wrap.slideDown();
        }
    });

});