Прогресс-бар для загрузки страницы ajax'ом

[iAmAir]

Добрый день! Хочу сделать прогресс-бар при загрузке страницы ajax'ом.
Код такой:

$.ajax({
      url: href,
      type: "POST",
      dataType: 'html',
      xhr: function() {
        var xhr = new window.XMLHttpRequest(); // получаем объект XMLHttpRequest

        xhr.addEventListener('progress', function(evt){ // добавляем обработчик события progress (onprogress)
          var contentLength;
          if (evt.lengthComputable) {
            contentLength = evt.total;
          } else {
            contentLength = evt.target.getResponseHeader('x-decompressed-content-length');
          }

          var percentComplete = Math.ceil(evt.loaded / contentLength * 100);
          console.log('Проценты' + percentComplete);
          console.log('Загружено' + evt.loaded);
          console.log('Всего' + contentLength);
          console.log(evt.lengthComputable)
        }, false);
        return xhr;
      },
      beforeSend: function() {
          $('html, body').animate({scrollTop: 0}, 500, 'swing');
          $('.preloader').addClass('preloader-active');
      },

Но в результате lengthComputable всегда false, а contentLength всегда 0, как и evt.total

Как получить размер страницы и высчитать процент загрузки в данном случае?

[Dilettante_Pro]

в результате lengthComputable всегда false, а contentLength всегда 0, как и evt.total

Страница формируется на сервере динамически?

При скачивании данных – обычно сервер в начале сообщает их общее количество в HTTP-заголовке Content-Length. Но он может и не делать этого, например если сам не знает, сколько данных будет или если генерирует их динамически. Тогда total будет равно 0. А чтобы отличить нулевой размер данных от неизвестного – как раз служит lengthComputable, которое в данном случае равно false.

Событие onprogress