Show Progressbar While Loading Pages Using Jquery Ajax in Single Page Website

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

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/

Want to show youtube like progress bar when page load

The website you are refering to is using pace -
https://github.com/HubSpot/pace/

It listen to all ajax request and dom loading and display a progress bar while hidding the page. Once everything have been loaded, it displays the content.

You can preview an example of this library in action here (yeah, inception power)

Update from comments:

Do you have 2 accounts ?

As I already said, this library DOES IT ALL. It tracks EVERY bytes being loaded after the script itself. It is easily customizable, and have a clear doc that you should read. It allows you to watch for dom elements loading progression, images/scripts/ajax stuffs progression, or even your long scripts.

If you have only your main html page that is the heavy stuff you should consider changing your design and refactoring in small pieces.

And if you can't and still want to tracks the progress, you can put a simple script at the very top of your page that will:

Send a HEAD http request for the same page with ajax. Just to know your total page size (Content-Length header).
Display progress based on current page size (many way of tracking, most simple is something like document.firstElementChild.innerHTML.length (it won't be very precise))
Once the page have been loaded, removes the progress bar

I gave you everything you need to make it work.

Edit2:

As I feel you will ask for more ... Here is a NodeJs example.
It simply create an http server, and serve a page with chunked content (and simulate lags ...). So the full page takes time to load.
The javascript display a text progression in real time.

var http = require('http');

function chunked(res, count) {
    res.write('<p>Chunked content n°' + count + '</p>');
    setTimeout(function() {
        if(count > 0)
            chunked(res, count - 1);
        else
            res.end('</body></html>');
    }, 1000);
}

function handleRequest(request, response){
    response.setHeader('Connection', 'Transfer-Encoding');
    response.setHeader('Content-Type', 'text/html; charset=utf-8');
    response.setHeader('Transfer-Encoding', 'chunked');

    response.write('<html><head><script>\n' +
        'var progress = 0; startLength = 825; TotalLength = 1090;\n' +
        'function track_progress() {\n' +
        '    console.log(document.firstElementChild.innerHTML.length);' +
        '    if(progress > 1000) {' +
        '        document.body.firstElementChild.innerHTML = "Progress: 100% - Done !";\n' +
        '        return;\n' +
        '    }\n' +
        '    \n' +
        '    if(document.body) {\n' +
        '        progress = (document.firstElementChild.innerHTML.length - startLength)* 1000 / (TotalLength - startLength);\n'+
        '        document.body.firstElementChild.innerHTML = "Progress: " + (Math.round(progress)/10) + "%";\n' +
        '    }\n' +
        '    setTimeout(track_progress, 500);\n' +
        '}\n' +
        'track_progress();\n' +
    '</script></head><body><p id="progress">Progress: 0%</p>');

    response.write('<p>Starting to send chunked content...</p>');
    chunked(response, 10);
}

var server = http.createServer(handleRequest);
server.listen(8080, function(){
    console.log("Server listening on: http://localhost:8080");
});

Redirect to a page after loading it and display progress bar

It can be done using Ajax. Check out this article which shows how it's done: https://onextrapixel.com/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/

It can also be done using the HTML5 History API(which is actually used by YouTube), it adds and removes page URLs into and from the History stack. The URL's from this stack is then used to load the pages using Ajax.

Read more about it here: Curious about the new way YouTube is loading pages

$.Ajax send with progress bar using jquery

You can do something like

$("elemnt").click(function(){
    $("loader-img").show();

    $.ajax({
        url : "your url",
        complete: function(){
            $("loader-img").hide();
        }
    });    
});

The loader image can be an page blocking div, to block the user from doing anything with a image at the center of the viewport.

Here the complete event is used since this event is called in case of a successful/failed ajax request.

EDITED
You can do something like

<style type="text/css">
    .blocker{
        z-index: 99999;
        opacity: .5;
        height: 100px;
        position: fixed;
        background: none repeat scroll 0 0 lightgrey;
        width: 100%;
    }

    .blocker .img{
        position: fixed;
        color: red;
    }
</style>

<body>
    <div class="blocker" style="display: none">
        <div class="img">img</div>
    </div>
    .............
    .............
    .............

Then In Script

function showBlocker(){
    $(".blocker .img").css({
        top: $(window).height() / 2,
        left: $(window).width() / 2
    });
    $(".blocker").show().css({
        height: $(document).height()
    });
}

Then call the showBlocker() method to show the blocker.

You can tweak the answer to fit into your need. This is just a sample how it can be achieved

Show Progressbar While Loading Pages Using Jquery Ajax in Single Page Website